如何创建React搜索过滤器以搜索多个对象键值 [英] how to create React search filter for search multiple object key values

问题描述

我想为我的数据数组创建一个搜索过滤器.它具有多个对象和键，例如

[
    {
        "fname": "Jayne",
        "lname": "Washington",
        "email": "[e-mail]",
        "gender": "female"
    },
    {
        "fname": "Peterson",
        "lname": "Dalton",
        "email": "[e-mail]",
        "gender": "male"
    },
    {
        "fname": "Velazquez",
        "lname": "Calderon",
        "email": "[e-mail]",
        "gender": "male"
    },
    {
        "fname": "Norman",
        "lname": "Reed",
        "email": "[e-mail]",
        "gender": "male"
    }
]

我要搜索过滤器在此数组的任何位置进行搜索. 例如:当我输入框时，我想搜索对象内部的任何地方.像fname，lname，email，gender

我该怎么办?请帮助我

如果我想只搜索姓氏和名字，该怎么做?

解决方案

您可以将值filter保留在组件状态中，并使用它查看是否将其作为子字符串包含在任何数组元素属性中. /p>

示例

 class App extends React.Component {
  state = {
    filter: "",
    data: [
      {
        fname: "Jayne",
        lname: "Washington",
        email: "[e-mail]",
        gender: "female"
      },
      {
        fname: "Peterson",
        lname: "Dalton",
        email: "[e-mail]",
        gender: "male"
      },
      {
        fname: "Velazquez",
        lname: "Calderon",
        email: "[e-mail]",
        gender: "male"
      },
      {
        fname: "Norman",
        lname: "Reed",
        email: "[e-mail]",
        gender: "male"
      }
    ]
  };

  handleChange = event => {
    this.setState({ filter: event.target.value });
  };

  render() {
    const { filter, data } = this.state;
    const lowercasedFilter = filter.toLowerCase();
    const filteredData = data.filter(item => {
      return Object.keys(item).some(key =>
        item[key].toLowerCase().includes(lowercasedFilter)
      );
    });

    return (
      <div>
        <input value={filter} onChange={this.handleChange} />
        {filteredData.map(item => (
          <div key={item.email}>
            <div>
              {item.fname} {item.lname} - {item.gender} - {item.email}
            </div>
          </div>
        ))}
      </div>
    );
  }
}

ReactDOM.render(<App />, document.getElementById("root")); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

<div id="root"></div> 

I want to create a search filter for my data array.it has multiple objects and keys like this one,

[
    {
        "fname": "Jayne",
        "lname": "Washington",
        "email": "[e-mail]",
        "gender": "female"
    },
    {
        "fname": "Peterson",
        "lname": "Dalton",
        "email": "[e-mail]",
        "gender": "male"
    },
    {
        "fname": "Velazquez",
        "lname": "Calderon",
        "email": "[e-mail]",
        "gender": "male"
    },
    {
        "fname": "Norman",
        "lname": "Reed",
        "email": "[e-mail]",
        "gender": "male"
    }
]

I want search filter search anywhere on this array. ex: when I type input box I want to search anywhere inside an object. like fname,lname,email,gender

how can i do it? please help me

If I want to restrict the search for only first and last names how to do that?

解决方案

You can keep a value filter in your component state and use that to see if it is contained as a substring in any of the array element properties.

Example

class App extends React.Component {
  state = {
    filter: "",
    data: [
      {
        fname: "Jayne",
        lname: "Washington",
        email: "[e-mail]",
        gender: "female"
      },
      {
        fname: "Peterson",
        lname: "Dalton",
        email: "[e-mail]",
        gender: "male"
      },
      {
        fname: "Velazquez",
        lname: "Calderon",
        email: "[e-mail]",
        gender: "male"
      },
      {
        fname: "Norman",
        lname: "Reed",
        email: "[e-mail]",
        gender: "male"
      }
    ]
  };

  handleChange = event => {
    this.setState({ filter: event.target.value });
  };

  render() {
    const { filter, data } = this.state;
    const lowercasedFilter = filter.toLowerCase();
    const filteredData = data.filter(item => {
      return Object.keys(item).some(key =>
        item[key].toLowerCase().includes(lowercasedFilter)
      );
    });

    return (
      <div>
        <input value={filter} onChange={this.handleChange} />
        {filteredData.map(item => (
          <div key={item.email}>
            <div>
              {item.fname} {item.lname} - {item.gender} - {item.email}
            </div>
          </div>
        ))}
      </div>
    );
  }
}

ReactDOM.render(<App />, document.getElementById("root"));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

<div id="root"></div>

这篇关于如何创建React搜索过滤器以搜索多个对象键值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！