1

反応することを学び、選択した要素に基づいて反応状態を更新しようとしています。私はreact-selectを使用しています。現在、すべてのデータが表示されています。しかし、選択ボックスからオプションを選択したときにデータを更新したい。複数のオプションを選択すると、選択したオプションをフィルタリングする状態を更新する必要があります。

const reviews = [
  {
    "id": 1,
    "rating": 5,
    "label": [
      "Sports",
      "Sleep"
    ],
  },
  {
    "id": 3,
    "rating": 5,
    "label": [
      "Sports",
      "Pain"
    ],
  },
];
class SelectCreateFilter extends React.Component {
  state = {
    multi: null,
    data: reviews,
    health: healthBenefitsOptions,
    category: productCategoryOptions, 
    products: productOptions,
  };
  handleChange = name => value => {
    this.setState({
      [name]: value,
      data: this.state.data.filter() //how to perform the data mathcing to reviews.label
    });

  };
  render() {
    return (
      <div>
          <Select
            options={groupedOptions}
            components={components}
            value={multi}
            onChange={this.handleChange('multi')}
            placeholder="Select multiple tags or products for reviews"
            isMulti
            isSearchable
          />
      </div>
    );
  }
}

助けてくれてありがとう。上記のコードを確認できるように、codesandbox のコードを次に示します https://codesandbox.io/embed/jlro0vo4n3?fontsize=14

4

1 に答える 1