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

Question

我无法取消选择我在 state 中设置的默认值。

我从Grommet 的代码沙箱中提取了一个示例。

到目前为止唯一的变化是添加一个对象数组而不是字符串数组。请参阅文档中提到的对象数组中的 VALUE 道具。.

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仍然在视图中突出显示/选中。

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