ReactJS无法使搜索过滤器（文本）正常工作

由 发布于 javascriptfilterreactjs
 收藏

I am trying to develop a very simple dashboard with some information. I'm trying to add in a search filter into my code so that I can narrow my data by names. In many other tutorials, I found that they have common used name.toLowerCase().indexOf(this.state.filterName.toLowerCase()) >= 0 but I just didn't work for me and would like to seek guidance from you guys.

您也可以提供有关我的代码总体结构的反馈！

Tables.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;

Main.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;
评论