小编Ben*_*ucs的帖子

我无法在下面的代码笔中弄清楚回调函数的逻辑。

按原样，当用户在输入字段中输入值时，列表将被过滤。如果过滤器被删除，我不知道如何将列表重新带回。

https://codepen.io/benszucs/pen/BPqMwL?editors=0010

  class Application extends React.Component {
  state = {
    options: ['Apple', 'Banana', 'Pear', 'Mango', 'Melon', 'Kiwi']
  }
  handleFilter = (newFilter) => {
    if (newFilter !== "") {
      this.setState(() => ({
        options: this.state.options.filter(option => option.toLowerCase().includes(newFilter.toLowerCase()))
      }));
    }
  };
  render() {
    return (
      <div>
        <Filter handleFilter={this.handleFilter} />
        {this.state.options.map((option) => <p>{option}</p>)}
      </div>
    );
  };
}

const Filter = (props) => (
  <div>
    <input name="filter" onChange={(e) => {
        props.handleFilter(e.target.value);
      }}/>
  </div>
);

ReactDOM.render(<Application />, document.getElementById('app'));