javascript - 如何使用 ant design 自动完成(react js)搜索和查找表详细信息

Question

我正在使用ant design自动完成，vx是我的数据源数组(仅包含所有姓名列表)，empData是我的表数据源。这里我的问题是如何从人名中搜索和找到正确的详细信息以及如何编写onSearch函数当我选择名称并按搜索按钮时？

<AutoComplete
    dataSource={vx}
    placeholder="type"
    onChange={this.handleChange
    onPressEnter={this.onSearch}
   filterOption={(inpvalueutValue, option) => option.props.children.toUpperCase().indexOf(inputValue.toUpperCase()) !== -1} />

 <Button type="primary" onClick={this.onSearch}>Search</Button>

这是我的handleChange函数

handleChange(value) {
    console.log(`selected  ${value}`);

  }

这是我的 table

 <Table pagination={{ pageSize: 10 }} columns={columns}  dataSource={this.state.empData} />

Answer 1

对自动完成和按钮标签进行此更改，下拉列表在选项选择后自动关闭。尝试以你现在的方式处理这件事。不过，搜索工作正常。

handleSearch = (selectedKeys, confirm) => () => {
        confirm();
        this.setState({ searchText: selectedKeys[0] });
      }

const dataSource1 = ['Amal', 'Chamika', 'Unknown'];

const columns = [{
          title: 'Name',
          dataIndex: 'name',
          key: 'name',
          filterDropdown: ({ setSelectedKeys, selectedKeys, confirm}) => (
            <div>
              <AutoComplete
                dataSource={dataSource1}
                placeholder="Search name"
                value={selectedKeys[0]}
                onChange={value => setSelectedKeys(value ? [value] : [])}
              />
            <Button type="primary" onClick={this.handleSearch(selectedKeys, confirm)}>Search</Button>
            </div>
          ),
          filterIcon: filtered => <Icon type="smile-o" style={{ color: filtered ? '#108ee9' : '#aaa' }} />,
          onFilter: (value, record) => record.name.toLowerCase().includes(value.toLowerCase()),
          render: (text) => text,
        }, {
          title: 'Age',
          dataIndex: 'age',
          key: 'age',
        }, {
          title: 'Address',
          dataIndex: 'address',
          key: 'address',
        }];