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

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

建造师

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 />
                    </>
                  ))}

{this.state.find}
{this.state.data.map（（val，index）=>(
{val.login}
{val.pass}


))}

您在筛选什么属性？登录？ 我建议在您所在的州创建一个过滤数据数组，这样您就不会修改原始数据

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
  });
}

---

你在筛选什么属性？登录？ 我建议在您所在的州创建一个过滤数据数组，这样您就不会修改原始数据

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
  });
}

---

如果希望state.data保持不变，可以在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 />
    </>
))}

filterUsers（e）{
这是我的国家({
查找：e.currentTarget.value
});
}
{this.state.find}
{this.state.data.filter（x=>x.login.includes（this.state.find））.map（（val，index）=>(
{val.login}
{val.pass}


))}

如果希望state.data保持不变，可以在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 />
    </>
))}

filterUsers（e）{
这是我的国家({
查找：e.currentTarget.value
});
}
{this.state.find}
{this.state.data.filter（x=>x.login.includes（this.state.find））.map（（val，index）=>(
{val.login}
{val.pass}


))}