我正在使用ant设计自动完成,vx是我的数据源数组(仅限所有名称列表),empData是我的表数据源.Here我的问题是如何从人名中搜索并找到正确的详细信息,以及当我选择人名并按下搜索按钮时如何编写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 pagination={{ pageSize: 10 }} columns={columns} dataSource={this.state.empData} />
发布于 2018-08-21 05:57:34
对您的自动完成和按钮标签进行此更改,下拉菜单在选项选择后自动关闭。试着用你现在做的方式来处理。然而,搜索运行得很好。
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',
}];
https://stackoverflow.com/questions/51914571
复制相似问题