无法从具有选项和值作为对象的 Select 组件中取消选择初始值

Question

我无法取消选择状态中设置的默认值。

我正在从 example in Grommet's codesandbox 中提取。

到目前为止唯一的变化是添加对象数组而不是字符串数组。 See VALUE prop in docs mention object array..

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}
      />
    );
  }
}

在日志中，当我尝试取消选择 Rollout 选项时，我得到 selected: [ -1, 1 ]，并且 Rollout 仍然在视图中 highlighted/selected。

Answer 1

这是您的工作代码，您需要检查当前点击的值是否已在选择中，然后将其从值中删除，如果不在选择中，则添加值。我如下更改了 onChange 函数。如果有任何问题，请告诉我。

import React, { Component } from "react";
import { Select } from "grommet";
import SandboxComponent from "./SandboxComponent";

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"
        selected={0}
        onSearch={searchText => {
          const regexp = new RegExp(searchText, "i");
          this.setState({ options: OPTIONS.filter(o => o.match(regexp)) });
        }}
        onChange={event => {
          let isExist = value.find(item => {
            return item.value === event.option.value;
          });
          let newValue;
          if (isExist) {
            newValue = value.filter(item => {
              return item.value !== event.option.value;
            });
          } else {
            newValue = value;
            newValue.push(event.option);
          }

          this.setState({
            value: newValue
          });
        }}
        options={options}
      />
    );
  }
}

无法从具有选项和值作为对象的 Select 组件中取消选择初始值

Can't deselect initial values from Select component with options and values as an object

reactjs

grommet