Невозможно отменить выбор начальных значений в компоненте Select с параметрами и значениями в качестве объекта - PullRequest
Новая
       36

Невозможно отменить выбор начальных значений в компоненте Select с параметрами и значениями в качестве объекта

2 голосов
/ 19 апреля 2019

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

Я вытащил из примера в кодах Grommet'sboxbox .

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

1 Ответ

1 голос
/ 19 апреля 2019

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