表中的搜索功能，无需从键盘单击输入按钮

【问题标题】：search functionality in table without clicking enter button from keyboard表中的搜索功能，无需从键盘单击输入按钮
【发布时间】：2021-08-29 05:36:56
【问题描述】：

我是新的 React 开发人员，这里有带搜索功能的 antd 表，有没有一种简单的方法可以在搜索时不从键盘上单击“输入”按钮来完成这项工作？例如，当用户开始编写“d..”时，它应该搜索它而不需要单击“输入”按钮，这里是代码：

https://codesandbox.io/s/z3ln7y0p04?file=/src/StatusFilter.js

【问题讨论】：

标签： javascript reactjs typescript antd

【解决方案1】：

你可以使用 onChange 属性代替::

handleChange = (e) => {
  const searchText = e.target.value;
  const filteredEvents = eventsData.filter(({ title }) => {
    title = title.toLowerCase();
    return title.includes(searchText);
  });

  this.setState({
    eventsData: filteredEvents,
  });
};

<>
  <Search
    placeholder="Enter Title"
    onSearch={onSearch}
    onChange={onChange}
    style={{ width: 200 }}
  />
  <TitleSearch
    onSearch={this.handleSearch}
    onChange={this.handleChange}
    className={styles.action}
  />
</>;

https://codesandbox.io/s/antd-table-filter-search-forked-4731q?file=/src/TitleSearch.js:174-305

【讨论】：