Question

我有以下代码从列表中搜索数据。我使用了以下代码，但是它不过滤记录。这是codepen [link] [1]。

 <div>
       <form>
        <div class="textfield">
         <input type="text" value={this.state.input} onChange={e => this.onSearchTextChange(e.target.value)} />
                                </div>
        <div class="submit-container">
        <button type="submit"><span class="sr-only">Go</span></button>
          </div>
        </form>
    </div>

Answer 1

您需要两个数组来进行搜索，第一个数组保存原始数据，第二个数组保存过滤的数据。

constructor(props) {
  super(props);
  this.state = {
    page: 2,
    itemsPerPage: 10,
    data: cardData.data.Table,
    filteredData: cardData.data.Table
  };
  this.items = createItems(100);
}

搜索过滤器功能

onSearchTextChange = searchText => {
  const newData = this.state.data.filter(
    item =>
      typeof item.first_name === "string" &&
      item.first_name.toLowerCase().includes(searchText.toLowerCase())
  );

  this.setState({
    filteredData: newData
  });
};

显示来自filteredData

的值

<List divided>
  {this.state.filteredData.map(results => (
    <div className="col-sm-3">
      <div className="card our-team" id="employeeInfo">
        <div className="card-body">
          <img
            class="pic"
            src={`data:image/jpeg;base64,${results.Employee_Photo}`}
            onerror="this.style.display='none'"
          />
          <h3 className="title">{results.first_name}</h3>
          <div className="row">
            <div className="col-md-3 col-sm-6">
              {" "}
              {results.Department}
            </div>
          </div>
          {/* row for Location cubicle Prof  */}

          <Link
            to={{ pathname: `/cards/${results.id}`, state: results }}
            className={`card-wrapper restore-${results.id}`}
          >
            View Detail
          </Link>
        </div>
      </div>
    </div>
  ))}
</List>

ReactJs：搜索不会过滤数据

1 个答案: