业务场景：如下图，要求input能输入，能远程搜索，出现下拉框，下拉框中的内容高度自定义：既可以选中到input，又能点击具体结果跳转页面。虽然ant的select能做的东西很多，但是还是达不到我想要的效果，那就自行动手
场景一下图描述
企业微信截图_16276264882801.png
场景二下图描述
企业微信截图_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）点击其他区域要隐藏下拉框，点击下拉区域和input不隐藏。使用起来要求跟使用Modal一样方便
思路已定，我们来写代码
1. protals组件,实现在body下面挂载组件，组件销毁也会从body移除。这是基础部分，可以在此基础上再创造各种在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. 创造定位组件alignRender，利用dom-align用来定位input和下拉框。该组件拥有显示，隐藏的方法，利用visible来实现首次挂载，基础样式也直接拿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[]
// 显示挂载，首次设置为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()
}
监听document，只有点击下拉和input才不关闭
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。到这里我们就实现了些业务的基石。可以实现多中定位场景。
3. 使用组件AlignRender ,下面的业务需要各种参数的传递，我这里使用useContext实现，所以下面使用了useMemo，具体可以看我的这篇文章优化使用useContext + useReducer 做数据管理
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()
// 切换国内外
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])
}
不仅仅是这个下拉组件，另有一个业务场景我也用到了该组件：点击按钮，按钮下方出现日历。
有兴趣可以看我这边日历遇到的问题ant使用calender自定义头部，区分onPanelChange onSelect 事件
以上就是思考解决问题的全部，文章很短，实现的过程确实一步步摸索得来，先写成一坨，再逐步拆分优化。这个AlignRender 的封装实现在后面能做很多事情，比如自定义modal，tooptip等等，希望对你有帮助
网友评论