时间戳

首页 > 解决方案 > ReactJS 无法让搜索过滤器（文本）工作

javascript - ReactJS 无法让搜索过滤器（文本）工作

问题描述

我正在尝试开发一个包含一些信息的非常简单的仪表板。我正在尝试将搜索过滤器添加到我的代码中，以便我可以按名称缩小数据范围。在许多其他教程中，我发现它们很常用，name.toLowerCase().indexOf(this.state.filterName.toLowerCase()) >= 0但我只是没有为我工作，并希望向你们寻求指导。

您还可以就我的代码的一般结构提供反馈！

表格.js

class Table extends Component {
  constructor(props){
    super(props);

    this.state = {
      filterName: this.props.filterName,
      toShow: 'all',
      myArrays: [
        { 'id': 1, 'name': 'Eric', 'email': 'name1@email.com', 'role': 'student', 'isadmin': 'false' },
        { 'id': 2, 'name': 'Amanda', 'email': 'name2@email.com', 'role': 'student', 'isadmin': 'false' },
        { 'id': 3, 'name': 'Brenda', 'email': 'name3@email.com', 'role': 'staff', 'isadmin': 'true' },
        { 'id': 4, 'name': 'Charles', 'email': 'name4@email.com', 'role': 'teacher', 'isadmin': 'true' },
        { 'id': 5, 'name': 'Daimon', 'email': 'name5@email.com', 'role': 'assistant', 'isadmin': 'false' }
      ]
    };
    this.toShowAdmin = this.toShowAdmin.bind(this);
  }

  toShowAdmin(){
    if (this.state.toShow === 'all'){
      this.setState({ toShow: 'admin' }, () => console.log(this.state.toShow ))
    } else {
      this.setState({ toShow: 'all' }, () => console.log(this.state.toShow ))
    }
  }

  render(){
    let myArrays = []

    if (this.state.toShow === 'all'){
      myArrays = this.state.myArrays;
    } else if (this.state.toShow === 'admin'){
      myArrays = this.state.myArrays.filter(row => row.isadmin === 'true')
    }

    myArrays = this.state.myArrays.filter(row => {
      return row.name.toLowerCase().indexOf(this.state.filterName.toLowerCase()) >= 0;
    });

    return(
      <div>
        <table className="table">
          <thead className="thead-dark">
            <tr>
              <th scope="col"> name </th>
              <th scope="col"> email </th>
              <th scope="col"> role </th>
              <th scope="col"> isadmin </th>
            </tr>
          </thead>

          <tbody>
            {myArrays.map(row=>
              <tr key={row.id}>
                <td> {row.name} </td>
                <td> {row.email} </td>
                <td> {row.role} </td>
                <td> {row.isadmin} </td>
              </tr>
            )}
          </tbody>
        </table>

        <button type='button' className='btn btn-primary' onClick={this.toShowAdmin}> Admins </button>
        { this.state.filterName }
      </div>
    );
  }
}

export default Table;

主.js

class Main extends Component {
  constructor(props){
    super(props);

    this.state = {
      filterName: ''
    };
    this.filterUpdate = this.filterUpdate.bind(this);
  }

  filterUpdate(value){
    this.setState({ filterName: value}, () => console.log(this.state.filterName))
  }

  render(){
    return(
      <div>
        <Search
          filterName={this.state.filterName}
          filterUpdate={this.filterUpdate}/>
        <Tables
          filterName={this.state.filterName}/>
      </div>
    );
  }
}

export default Main;

标签： javascriptreactjsfilter

解决方案

加载子组件后，您必须使用componentWillReceiveProps父道具更新子状态。将这样的内容添加到子组件 -

componentWillReceiveProps(){
 this.setState({filterName: this.props.filterName})
}

看到这个堆栈溢出答案

否则，如果您的逻辑允许您直接在渲染中使用道具，您也可以这样做 -

myArrays = this.state.myArrays.filter(row => {
      return row.name.toLowerCase().indexOf(this.props.filterName.toLowerCase()) >= 0;
 });

编辑 - 使用 componentDidUpdate()

正如评论中正确指出的那样，componentWillReceiveProps()已弃用。改为使用componentDidUpdate()。

componentDidUpdate(){
     this.setState({filterName: this.props.filterName})
}

推荐阅读