Question

我正在尝试使用反应选择的 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不会执行任何操作。

谁能帮助我了解这里的情况。预先感谢。

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

未从CreatableSelect的onChange方法触发setState

1 个答案: