setState 不是从 CreatableSelect 的 onChange 方法触发的

Question

我正在尝试使用 react-select 的 CreatableSelect 从用户那里获取输入。我配置了 onCreateOption 和 onChange 方法来分别处理新选项和清除 selection。示例代码就在这个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);

我现在的问题是，每当我尝试清除 select 选项时，都会触发 onChange 方法，但 onChange 中的 setState 不会执行任何操作。

任何人都可以帮助我了解这里发生的事情。提前致谢。

Answer 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 条件。

setState 不是从 CreatableSelect 的 onChange 方法触发的

setState not triggered from onChange method of CreatableSelect

reactjs

react-select