Блог

Я не могу отменить выбор значений по умолчанию, которые я установил в состоянии.

Я использую пример из codesandbox Grommet.

Единственным изменением на данный момент является добавление массива объектов вместо массива строк. См. ЗНАЧЕНИЕ 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 он по-прежнему визуально выделяется / выбирается в представлении.

Вот ваш рабочий код, вам нужно проверить, есть ли уже выбранное значение в выборе, затем удалить его из значений, и если его нет в выбранном, добавьте значения. Я изменил функцию 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}
      />
    );
  }
}