首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >如何使用ant设计自动完成(React js)搜索和查找表格详细信息

如何使用ant设计自动完成(React js)搜索和查找表格详细信息
EN

Stack Overflow用户
提问于 2018-08-19 12:48:43
回答 1查看 4.8K关注 0票数 1

我正在使用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} />
EN

回答 1

Stack Overflow用户

回答已采纳

发布于 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',
        }];
票数 1
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/51914571

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档