如何在React中创建搜索过滤器

import React, { Component } from 'react';

class SearchFilter extends Component {
  constructor(props) {
    super(props);
    this.state = {
      searchKeyword: '',
      data: [/* 数据源 */],
      filteredData: []
    };
  }

  handleSearch = () => {
    const { searchKeyword, data } = this.state;
    const filteredData = data.filter(item => item.includes(searchKeyword));
    this.setState({ filteredData });
  }

  handleChange = (e) => {
    this.setState({ searchKeyword: e.target.value });
  }

  render() {
    const { searchKeyword, filteredData } = this.state;

    return (
      <div>
        <input type="text" value={searchKeyword} onChange={this.handleChange} />
        <button onClick={this.handleSearch}>搜索</button>
        <ul>
          {filteredData.map(item => <li key={item}>{item}</li>)}
        </ul>
      </div>
    );
  }
}

export default SearchFilter;