Question

我要过滤并显示按input中键入的占位符表示的数组。

当我键入1时，我可以显示具有Placeid 1的数组。

但是，此后，如果我输入2，则什么也没出现。

我的代码是这样的。

class List extends Component {
  constructor(props) {
    super(props)
    this.state = {
      val: ''
    }
  }
  _filterVal = e => {
    this.setState({ val: e.target.value })
  } 
  handleSetFilter = async () => {
      this.props.handleFilterVal(this.state.val);
  }
  render() {
    return (
      <div id="content">
        <div>
          <li>List</li>
          <input
            type="text"
            defaultValue=""
            onKeyUp={this._filterVal}
          />
          <button onClick={this.handleSetFilter} className='Filter'>Filter</button>
          { this.props.checkins.map((checkin, key) => {
            return(
              <div key={key}>
                <p>Placeid:{checkin.placeid}: ---- </p>
              </div>
            )
          })}
        </div>  
      </div>
    );
  }
}

export default PlaceList;

...
  handleFilterVal(val) {
    const line = this.state.lists.filter((item => {  
      return item.placeid.search( val ) !== -1; 
    }))
    this.setState({
      lists: line
    });
  }
...

此外，我想在不输入任何内容时显示所有数组。

请给我任何建议吗？

Answer 1

handleFilterVal(val) {
    const line = this.state.lists.filter((item => {  
      return item.placeid.search( val ) !== -1; 
    }))
    this.setState({
      lists: line
    });
  }

您正在此处过滤，并将列表的状态也设置为“线”。

当您再次单击以过滤另一个变量时，它将随后过滤“列表”中的内容（这只是您输入的原始值。）

如果您首先搜索1，则行仅是一项。然后，当您再次过滤时，您将只过滤该项目。

您可能应该为filteredList保留一部分状态，然后将过滤器的结果存储在那里，而不是覆盖列表。

如何在反应中过滤和显示数组

1 个答案: