web-dev-qa-db-ja.com

作成方法React複数のオブジェクトキー値を検索するための検索フィルター

データ配列の検索フィルターを作成します。このような複数のオブジェクトとキーがあり、

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

この配列のどこでも検索フィルター検索が必要です。例：入力ボックスを入力するとき、オブジェクト内のどこでも検索したい。 fname、lname、email、genderなど

どうすればいいですか？私を助けてください

姓と名のみの検索を制限する場合はどうすればよいですか？

javascriptreactjsloops
6
Gihan Rangana

コンポーネントの状態にfilterの値を保持し、それを使用して、配列要素プロパティのいずれかにサブストリングとして含まれているかどうかを確認できます。

例

class App extends React.Component {
  state = {
    filter: "",
    data: [
      {
        fname: "Jayne",
        lname: "Washington",
        email: "[email protected]",
        gender: "female"
      },
      {
        fname: "Peterson",
        lname: "Dalton",
        email: "[email protected]",
        gender: "male"
      },
      {
        fname: "Velazquez",
        lname: "Calderon",
        email: "[email protected]",
        gender: "male"
      },
      {
        fname: "Norman",
        lname: "Reed",
        email: "[email protected]",
        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>
10
Tholle

最後に、react-mui-datatablesライブラリを作成しました。そこからダウンロードできます

https://www.npmjs.com/package/react-mui-datatables

0
Gihan Rangana