2

状態で設定したデフォルト値の選択を解除できません。

Grommet の codesandbox の例から引用しています。

これまでの唯一の変更点は、文字列の配列の代わりにオブジェクト配列を追加したことです。ドキュメントの VALUE prop を参照して、オブジェクト配列について言及してください。.

const OPTIONS = [
  {
    label: "Expansion",
    value: "1"
  },
  {
    label: "Rollout",
    value: "2"
  }
];

export default class extends Component {
  state = {
    value: [
      {
        label: "Rollout",
        value: "2"
      }
    ],
    options: OPTIONS
  };

  render() {
    const { options, value } = this.state;
    return (
      <Select
        multiple={true}
        value={value}
        labelKey="label"
        valueKey="value"
        onSearch={searchText => {
          const regexp = new RegExp(searchText, "i");
          this.setState({ options: OPTIONS.filter(o => o.match(regexp)) });
        }}
        onChange={event => {
          console.log({ event });
          this.setState({
            value: event.value,
            options: OPTIONS
          });
        }}
        options={options}
      />
    );
  }
}

ログでは、オプションselected: [ -1, 1 ]の選択を解除しようとすると取得されますが、ビューで視覚的に強調表示/選択されたままです。RolloutRollout

4

1 に答える 1