Question

我有以下代码，这些代码显示来自Json文件的数据，如何添加过滤器/搜索功能。我在codeandbox here

中有代码

需要申请我是整流器初学者

export class Cards extends React.Component {
  componentDidMount() {
    const item = document.querySelector(
      ".restore-" + this.props.location.Object
    );
    if (item) {
      item.scrollIntoView();
    }
  }

  render() {
    const cardKeys = Object.keys(cardData);
    return (
      <div className="scroll-list">
        {cardData.data.Table.map((results, index) => {
          return (
            <div className="col-sm-3">
              <div className="card our-team" id="employeeInfo">
                <div className="card-body">

                  <h3 className="title">{results.first_name}</h3>
                  <h3>{results.id}</h3>  

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

}

我需要知道更简单的方法来完成它。

我尝试阅读了很多有关如何执行此操作的文章，但我无法使其正常工作，任何帮助将不胜感激

Answer 1

您应该以状态存储列表数据（此处为cardData）。然后，您可以添加一些输入并基于这些输入过滤数据。例如

export class Cards extends React.Component {
  state={data:[]}
  componentDidMount() {
    // ...
    this.setState({data: cardData.data.Table})
  }
  // For example:
  onSearchTextChange = (searchText) => {
    const newData = cardData.data.Table.filter(item => item.first_name === 
      searchText);
  }
  render() {
    const cardKeys = Object.keys(this.state.data);
    // ... your render function
  }
}

我如何在ReactJs中创建搜索和过滤器

1 个答案: