react中搜索框筛选函数

在 React 中实现搜索框筛选，可以通过以下步骤来实现：

1. 创建一个包含搜索框和数据列表的组件。

2. 在组件的 state 中设置一个变量来存储输入框中的搜索关键字。

3. 创建一个筛选函数，该函数接受数据列表和搜索关键字作为参数，并返回一个筛选后的结果列表。

4. 在组件的 render 方法中，根据搜索关键字和筛选函数返回的结果渲染数据列表。

下面是一个简单的例子：

class SearchComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      keyword: '',
    };
  }

  handleSearch = (event) => {
    this.setState({
      keyword: event.target.value,
    });
  };

  filterData = (dataList, keyword) => {
    return dataList.filter((data) =>
      data.name.toLowerCase().includes(keyword.toLowerCase())
    );
  };

  render() {
    const filteredData = this.filterData(this.props.dataList, this.state.keyword);
    return (
      <div>
        <input type="text" onChange={this.handleSearch} />
        <ul>
          {filteredData.map((data) => (
            <li key={data.id}>{data.name}</li>
          ))}
        </ul>
      </div>
    );
  }
}

在上面的例子中，我们创建了一个名为 `SearchComponent` 的组件，该组件包含一个输入框和一个数据列表。在组件的 state 中，我们设置了一个名为 `keyword` 的变量来存储搜索关键字。在输入框的 `onChange` 事件中，我们更新了 `keyword` 变量的值。

我们还创建了一个名为 `filterData` 的筛选函数，该函数接受数据列表和搜索关键字作为参数，并返回一个筛选后的结果列表。在组件的 render 方法中，我们调用了 `filterData` 函数来获取筛选后的数据列表，并根据该列表渲染了数据项。