setState не вызывается из метода onChange объекта CreatableSelect - PullRequest
Новая
       5

setState не вызывается из метода onChange объекта CreatableSelect

0 голосов
/ 10 апреля 2019

Я пытаюсь использовать act-select CreatableSelect , чтобы получить ввод от пользователя.Я настроил методы onCreateOption и onChange для обработки новых параметров и отмены выбора соответственно.Пример кода по этому URL .Я также копирую приведенный ниже код. 

import React from "react";
import ReactDOM from "react-dom";
import CreatableSelect from "react-select/lib/Creatable";
import clonedeep from "lodash.clonedeep";


class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      selectOption1: null,
      selectOption2: null,
      selectedOptions: {
        option1Value: null,
        option2Value: null
      }
    };
  }

  handleOption1 = option => {
    let selectedOptions = clonedeep(this.state.selectedOptions);
    selectedOptions.option1Value = option;
    this.setState({
      selectedOptions,
      selectOption1: { label: option, value: option }
    });
  };

  handleOption1Change = (option, action) => {
    console.log(action);
    let selectedOptions = clonedeep(this.state.selectedOptions);
    selectedOptions.option1Value = null;
    if (action === "clear" || action === "pop-value") {
      console.log(action);
      this.setState({ selectedOptions, selectOption1: null });
    }
  };

  render() {
    return (
      <CreatableSelect
        value={this.state.selectOption1}
        backspaceRemovesValue={true}
        escapeClearsValue={true}
        isClearable={true}
        placeholder="Enter First name"
        formatCreateLabel={inValue => inValue.toUpperCase()}
        noOptionsMessage={() => null}
        onCreateOption={this.handleOption1}
        onChange={this.handleOption1Change}
      />
    );
  }
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

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

Может кто-нибудь помочь мне понять, что здесь происходит.Заранее спасибо.

1 Ответ

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

Проблема была с моим handleOption1Измените метод.Параметр action - это не строка, а объект.Поэтому мой handleOption1Change должен был быть таким, как показано ниже. 

 handleOption1Change = (option, action) => {
    console.log(action);
    let selectedOptions = clonedeep(this.state.selectedOptions);
    selectedOptions.option1Value = null;
    if (action.action === "clear" || action.action === "pop-value") {
      console.log(action);
      this.setState({ selectedOptions, option1Value: null });
    }
  };

Обратите внимание на условие if в строке 5.

...