業(yè)務(wù)場景：如下圖始鱼，要求input能輸入，能遠程搜索鸯旁，出現(xiàn)下拉框噪矛，下拉框中的內(nèi)容高度自定義：既可以選中到input，又能點擊具體結(jié)果跳轉(zhuǎn)頁面铺罢。雖然ant的select能做的東西很多艇挨，但是還是達不到我想要的效果，那就自行動手
場景一下圖描述
企業(yè)微信截圖_16276264882801.png
場景二下圖描述
企業(yè)微信截圖_1627626415326.png
解決思路：
（1） 仔細觀察ant的select組件并模仿：選中input利用createPortal 在body下面生成dom韭赘，也就是一個下拉組件
（2）利用dom-align定位到input下面：ant Select基于rc-select缩滨，rc-select的下拉框基于rc-trigger，rc-trigger的下拉框定位基于第三方庫dom-align泉瞻。
（3）點擊其他區(qū)域要隱藏下拉框脉漏，點擊下拉區(qū)域和input不隱藏。使用起來要求跟使用Modal一樣方便
思路已定袖牙，我們來寫代碼
1. protals組件,實現(xiàn)在body下面掛載組件侧巨，組件銷毀也會從body移除。這是基礎(chǔ)部分鞭达，可以在此基礎(chǔ)上再創(chuàng)造各種在body下的組件
import { useLayoutEffect, useRef } from 'react'
import { createPortal } from 'react-dom'
type ProtalsProps = {
children: any
}
const Protals = ({ children }: ProtalsProps) => {
const containerRef = useRef<HTMLDivElement | null>(null)
if (!containerRef.current) {
containerRef.current = document.createElement('div')
document.body.appendChild(containerRef.current)
}
useLayoutEffect(() => {
return () => {
const node = containerRef.current
if (node) {
document.body.removeChild(node)
}
}
}, [])
return createPortal(children, containerRef.current)
}
export default Protals
2. 創(chuàng)造定位組件alignRender司忱，利用dom-align用來定位input和下拉框。該組件擁有顯示碉怔，隱藏的方法烘贴，利用visible來實現(xiàn)首次掛載禁添，基礎(chǔ)樣式也直接拿select的樣式撮胧，嘿嘿
// alignRender.tsx
import { FC, useEffect, useImperativeHandle, useRef } from 'react'
import Protals from '../protals'
import domAlign from 'dom-align'
type AlignRenderProps = {
children: any
targetNode: any
childRef?: any
points?: any[]
offset?: any[]
// 顯示掛載，首次設(shè)置為true即可
visible: boolean
}
const AlignRender: FC<AlignRenderProps> = ({
children,
visible,
targetNode,
childRef,
points = ['tl', 'bl'],
offset = ['0', '0'],
}) => {
const sourceNode: any = useRef<HTMLDivElement | null>(null)
const open = () => {
domAlign(sourceNode.current, targetNode.current, {
points,
offset,
})
}
const close = () => {
domAlign(sourceNode.current, targetNode.current, {
points,
offset: ['-1000%', '0'],
})
}
// 暴露隱藏和顯示的方法
useImperativeHandle(childRef, () => ({
open,
close,
}))
function clickCallback(e: Event) {
if (
sourceNode.current.contains(e.target) ||
targetNode.current.contains(e.target)
) {
return
}
close()
}
監(jiān)聽document老翘，只有點擊下拉和input才不關(guān)閉
useEffect(() => {
if (visible) {
open()
document.addEventListener('click', clickCallback, false)
return () => {
document.removeEventListener('click', clickCallback, false)
}
}
}, [visible])
if (!visible) return null
return (
<Protals>
<div
ref={sourceNode}
style={{ padding: '0' }}
className={'ant-select-dropdown'}
>
{children}
</div>
</Protals>
)
}
export default AlignRender
ok芹啥。到這里我們就實現(xiàn)了些業(yè)務(wù)的基石∑糖停可以實現(xiàn)多中定位場景墓怀。
3. 使用組件AlignRender ,下面的業(yè)務(wù)需要各種參數(shù)的傳遞，我這里使用useContext實現(xiàn)卫键，所以下面使用了useMemo傀履，具體可以看我的這篇文章優(yōu)化使用useContext + useReducer 做數(shù)據(jù)管理
const SearchSelect: FC = () => {
const [visible, setVisible] = useState<boolean>(false)
const { type, keyWords } = useBarState()
const dispatch = useDispatchBarState()
const [value, setValue] = useState<string>('')
const targetNode: any = useRef<HTMLDivElement | null>(null)
const childRef: any = useRef()
// 切換國內(nèi)外
useEffect(() => {
if (keyWords && visible) {
childRef.current.open()
}
}, [type])
return useMemo(() => {
const changeInput = ({ target }: any) => {
childRef.current.open()
setValue(target.value)
// 如果更改詞匯，則去掉城市id
dispatch &&
dispatch({
keyWords: target.value,
cityId: '',
stateId: '',
countryId: '',
})
}
const AlignProp = {
visible,
targetNode,
childRef,
}
return (
<div className={'relative inline-block'} ref={targetNode}>
<Input
className={styles.input}
bordered={false}
value={value}
placeholder="城市/酒店名稱"
onChange={changeInput}
onFocus={() => {
if (visible) {
childRef.current.open() // 再次點擊
} else {
setVisible(true) //visible置為true莉炉，首次掛載到body
}
}}
/>
<AlignRender {...AlignProp}>
<div className={classnames(value ? 'hidden' : 'block')}>
<DistrictTab {...districtProps} />
</div>
<div className={classnames(value ? 'block' : 'hidden')}>
<Hotels {...districtProps} />
</div>
</AlignRender>
</div>
)
}, [keyWords, visible, value])
}
不僅僅是這個下拉組件钓账，另有一個業(yè)務(wù)場景我也用到了該組件：點擊按鈕碴犬，按鈕下方出現(xiàn)日歷。
有興趣可以看我這邊日歷遇到的問題ant使用calender自定義頭部梆暮，區(qū)分onPanelChange onSelect 事件
以上就是思考解決問題的全部服协，文章很短，實現(xiàn)的過程確實一步步摸索得來啦粹，先寫成一坨偿荷，再逐步拆分優(yōu)化。這個AlignRender 的封裝實現(xiàn)在后面能做很多事情唠椭，比如自定義modal跳纳，tooptip等等，希望對你有幫助
