setState 不是从 CreateableSelect 的 onChange 方法触发的答案

【问题标题】：setState not triggered from onChange method of CreatableSelectsetState 不是从 CreateableSelect 的 onChange 方法触发的
【发布时间】：2019-04-10 02:24:33
【问题描述】：

我正在尝试使用 react-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 方法都会被触发，但 onChange 中的 setState 没有做任何事情。

谁能帮我理解这里发生了什么。提前致谢。

【问题讨论】：

标签： reactjs react-select

【解决方案1】：

问题出在我的 handleOption1Change 方法上。参数 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 });
    }
  };

注意第 5 行的 if 条件。

【讨论】：