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

Question

我在表单上有一个选择组件。 我尝试在其中组合搜索功能。我已经对组件进行了更改，它与我想要的相匹配，但是我很困惑与当前数据进行比较，以便此搜索功能运行

这是我的代码

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>

数据选择格式：

[
  {
    "_id": "5d22f0b56fc5841b7caacda5",
    "address": "",
    "status": "temporary delete",
    "email": "[e-mail]",
    "name": "Monkey D Luffy",
    "phone": "1234"
  },
  {
    "_id": "5d26d9ccf2d1fc17b4d79ab1",
    "address": "",
    "status": "temporary delete",
    "email": "[e-mail]",
    "name": "[e-mail]",
    "phone": "12345"
  },
  {
    "_id": "5d2d2be4f471124ad4c0b019",
    "address": "",
    "status": "not verified",
    "email": "[e-mail]",
    "name": "asdfff",
    "phone": "1234"
  }
]

提前谢谢。

Answer 1

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

<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>