这是我封装的一个select代码,直接拿过去就可以用了
import React, { MutableRefObject } from 'react'
import { Select } from 'antd';
import { UserOutlined } from '@ant-design/icons';
const { Option } = Select;
export interface SelectProps {
value: string;
setSearchOpt: any[];
onChangeHandl: (value: any) => void;
onSearch: (value: any) => void;
valueRef: MutableRefObject<{ value: string; }>
formSetValue: (value: string) => void;
onClear: () => void;
}
const SelectSearch: React.FC<SelectProps> = (props) => {
return <>
<Select
showSearch // 使用单选模式可搜索
value={props.value} // 选中当前条目,多选返回数组
placeholder={''} // select默认展示的说明
defaultActiveFirstOption={false} // 是否默认高亮第一个选项
filterOption={false} // 是否根据输入项进行筛选
onSearch={props.onSearch} // “文本框值”变化时的回调
onChange={props.onChangeHandl} // 选中option,或input的value回调
notFoundContent={null} // 当下拉列表为空时,显示的内容
allowClear // 是否支持清除
suffixIcon={<UserOutlined />} // 自定义的选择框后缀的图标
onBlur={() => {
console.log(props)
// props.valueRef.current.value
props.formSetValue('')
}}
onClear={props.onClear}
>
{
props.setSearchOpt.map((item: any) => {
return <Option key={item.value} value={item.value}>{item.name}</Option>
})
}
</Select>
</>
}
export default SelectSearch
使用:
注:实际上我项目中我针对表单的Form.item是做了封装的,所以以下示例针对看我博客的朋友能更快速的理解,所以做了简化的示例,如有不到之处,可以指出,我会进行说明修改的。
/**
* 使用select组件页面
*/
import { Form } from 'antd'
import SelectSearch from './SelectSearch'
import { useRef, useState } from 'react'
/**
* 模拟数据
*/
const data = [
{
value: 1,
name: 'aaa'
},
{
value: 2,
name: 'bbb'
},
{
value: 3,
name: 'ccc'
},
]
const UseSelect: React.FC = () => {
// 这个是在失去焦点后,select框内的数据就会消失,value就是空,select框无数据,所以这个最后通过form设置值的方法来解决这个问题
const valueRef = useRef({ value: '' })
const [searchOpt, setSearchOpt] = useState(data)
const [searchVal, setSearchVal] = useState('')
const [form] = Form.useForm()
const formSetValue = (value?: string) => {
if(value) {
valueRef.current.value = value
}
console.log(valueRef.current.value)
form.setFieldsValue({username: valueRef.current.value})
setSearchVal(valueRef.current.value) // 这个是进行select输入信息后进行回显的
}
/**
* 清除select
*/
const onClear = () => {
console.log('is clear here?')
form.resetFields();
valueRef.current.value = ''
formSetValue()
}
return <>
<Form form={form} name="dynamic_rule">
<Form.Item
name="username"
label="Name"
rules={[
{
required: true,
message: 'Please input your name',
},
]}
>
<SelectSearch
value={searchVal}
setSearchOpt={searchOpt}
valueRef={valueRef}
onChangeHandl={(value: any)=> {
const findData = data.find(item => item.value === value)?.name || ''
formSetValue(findData)
}}
onSearch={(value: any) => { // 需要搜索时输入的内容
formSetValue(value || '')
setSearchOpt((item) => item.filter(ele => ele.name.includes(value))) // 我的功能需求:用户在这里输入信息后,需要调接口进行进行获取Option内容的数据
}}
formSetValue={formSetValue}
onClear={onClear}
/>
</Form.Item>
</Form>
</>
}
export default UseSelect