Question

我能够存储包含登录和传递对象的数据数组。我创建了一个输入字段，在其中输入要在状态中找到的内容。如何过滤状态并仅显示匹配项？

构造函数

class List extends Component {
  constructor(props) {
    super(props);
    this.state = {
      data: [
        { login: "login", pass: "pass" },
        { login: "login2", pass: "pass2" }
      ],
      login: "",
      pass: "",
      find: ""
    };

添加和显示数据

add(e) {
    e.preventDefault();
    this.setState({
      [e.target.name]: e.target.value
    });
  }

  show(e) {
    e.preventDefault();

    if (!this.state.login.length || !this.state.pass.length) {
      return;
    } else {
      const newUser = {
        login: this.state.login,
        pass: this.state.pass
      };

      this.setState(state => ({
        data: state.data.concat(newUser)
      }));
    }
  }

搜索

 filterUsers(e) {
    let { data } = this.state;

    //console.log(this.temp.login);

    this.setState({
      find: e.currentTarget.value
    });
  }

渲染

   <input onInput={this.filterUsers.bind(this)} />
                  <div>{this.state.find}</div>
                  {this.state.data.map((val, index) => (
                    <>
                      <td>{val.login}</td>

                      <td>{val.pass}</td>

                      <br />
                      <div />
                    </>
                  ))}

Answer 1

您要过滤哪个属性？登录？建议您在您的状态下创建一个经过过滤的数据数组，以免修改原始数据。

filterUsers(event)
{
  let filteredArray = this.state.data.filter((user) => 
  {
    user.login === event.currentTarget.value;
    //or if you want partial matches
    //user.login.includes(event.currentTarget.value)
  })
  this.setState({
    filteredList: filteredArray
  });
}

Answer 2

如果要保持状态不变，可以不修改数据，可以在render方法中过滤出搜索词。

filterUsers(e) {
    this.setState({
        find: e.currentTarget.value
    });
}


<input onInput={this.filterUsers.bind(this)} />
<div>{this.state.find}</div>
{this.state.data.filter(x => x.login.includes(this.state.find)).map((val, index) => (
    <>
        <td>{val.login}</td>

        <td>{val.pass}</td>

        <br />
        <div />
    </>
))}

如何在状态下进行搜索（反应）

2 个答案: