状態で設定したデフォルト値の選択を解除できません。
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 ]
の選択を解除しようとすると取得されますが、ビューで視覚的に強調表示/選択されたままです。Rollout
Rollout