如何在 React Hooks 中使用 Antd 进行搜索

Question

我在表单上有一个 select 组件。我试图结合其中的搜索功能。我已经在组件上做了一个 onchange 并且它符合我想要的，但是我很困惑与当前数据进行比较以便这个搜索功能运行

这是我的代码

const searchChange = (data) => {
            search_value       = []
            let new_data       = _.cloneDeep(dataOpt)
            let keyword        = _.isString(data) ? data : null
            let fixed_data     = _.isEmpty(data) ? dataOpt : _.filter(new_data, u => _.toLower(u.email).indexOf(_.toLower(keyword)) > -1 )
            people_value = fixed_data
        }  

const peopleChange  = (data) => {
        people_value = data
        return people_value;
}

渲染：

<Form.Item label="People">
    <Select
        showSearch
        mode            = "multiple"
        placeholder     = "Choose People, you want inviting"
        onChange        = {(e) => peopleChange(e)}
        style           = {{ width: '100%' }}
        notFoundContent = {null}
        onSearch        = {(e) => searchChange(e)}
    >
        {!_.isNil(filteredOptions) && filteredOptions.map(item =>(
            <Select.Option key={Math.random()} value={item._id}>{item.email}</Select.Option> 
            ))  
        }
    </Select>
</Form.Item>

dataOpt 格式：

[
  {
    "_id": "5d22f0b56fc5841b7caacda5",
    "address": "",
    "status": "temporary delete",
    "email": "ccc@ccc.com",
    "name": "Monkey D Luffy",
    "phone": "1234"
  },
  {
    "_id": "5d26d9ccf2d1fc17b4d79ab1",
    "address": "",
    "status": "temporary delete",
    "email": "kopral@kopral.com",
    "name": "kopral@jono.com",
    "phone": "12345"
  },
  {
    "_id": "5d2d2be4f471124ad4c0b019",
    "address": "",
    "status": "not verified",
    "email": "asd@asd.com",
    "name": "asdfff",
    "phone": "1234"
  }
]

提前致谢。

Answer 1

您可以使用 filterOption 属性来过滤数据。以下是您的数据示例：

<Select
    showSearch
    style={{ width: 200 }}
    placeholder="Select a person"
    optionFilterProp="children"
    onChange={onChange}
    onFocus={onFocus}
    onBlur={onBlur}
    onSearch={onSearch}
    filterOption={(input, option) =>
      option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0
    }
  >
    {data.map(item => <Option key={item._id} value={item.email}>{item.email}</Option> )}
  </Select>

如何在 React Hooks 中使用 Antd 进行搜索

How to Searching with Antd in React Hooks

reactjs

antd

react-hooks