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

Question

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

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

Answer 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

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

search functionality in table without clicking enter button from keyboard

javascript

typescript

reactjs

antd