react之修改Antd筛选框为可输入筛选框

本文使用antd4

一、html代码

 <Form.Item label={'错误类型'} name="errType">
  <Select
     style={{ width: 145 }}
     placeholder={'请选择错误类型'}
     showSearch
     onSearch={val => {
       handleSearch(val);
     }}
     onBlur={handleBlur}
   >
     {errTypeList.map(
       (item, index): JSX.Element => {
         return (
           <Option value={item.errName} key={index}>
             {item.errName}
           </Option>
         );
       },
     )}
   </Select>
 </Form.Item>

二、使用onSearch函数监听输入值

const [err, setErr] = useState('');
const handleSearch = useCallback((value): void => {
    if (value) {
      setErr(value);
    }
  }, []);

三、使用onBlur函数将数据push进Option数组中

import { uniqWith, isEqual } from 'lodash-es';
  const handleBlur = useCallback(
    index => {
      if (err) {
        let errList = [...errTypeList];
        errList = [...errTypeList, { errName: err }];
        var uniq_user = uniqWith(errList, isEqual);
        setErrTypeList(uniq_user);
        setErr('');
      }
    },
    [err, errTypeList],
  );

---

四、antd4扩展菜单

发现antd4 扩展菜单这一功能完全支持上述功能

（1）html代码

        <Form.Item label={'错误类型'} name="errType">
          <Select
            style={{ width: 240 }}
            placeholder={'请选择错误类型'}
            allowClear
            showSearch
            dropdownRender={menu => (
              <div>
                {menu}
                <Divider style={{ margin: '4px 0' }} />
                <div style={{ display: 'flex', flexWrap: 'nowrap', padding: 8 }}>
                  <Input style={{ flex: 'auto' }} value={name} onChange={onNameChange} />
                  <a
                    style={{ flex: 'none', padding: '8px', display: 'block', cursor: 'pointer' }}
                    onClick={addItem}
                  >
                    <PlusOutlined /> 添加筛选项
                  </a>
                </div>
              </div>
            )}
          >
            {errTypeList.map(
              (item, index): JSX.Element => {
                return (
                  <Option value={item.errName} key={index}>
                    {item.errName}
                  </Option>
                );
              },
            )}
          </Select>
        </Form.Item>
        <Form.Item label={'模块'} name="module">
          <Select style={{ width: 240 }} placeholder={'请选择模块'} allowClear showSearch>
          //筛选项数组
            {moduleTypeList.map(
              (item): JSX.Element => {
                return (
                  <Option value={item.name} key={item.name}>
                    {item.name}
                  </Option>
                );
              },
            )}
          </Select>
        </Form.Item>

（2）js代码

  const [name, setName] = useState('');
  //拿到新加的item
  const onNameChange = useCallback(event => {
    if (event.target.value) {
      setName(event.target.value);
    }
  }, []);
  //添加item
  const addItem = useCallback(() => {
    if (name) {
      let errList = [...errTypeList];
      errList = [...errTypeList, { errName: name }];
      //判断添加的item是否唯一
      var uniq_user = uniqWith(errList, isEqual);
      setErrTypeList(uniq_user);
      setName('');
    }
  }, [errTypeList, name]);