React-select onChange 当用户 select 相同选项时触发

Question

当我 select 下拉菜单中已经 select 编辑的值时，react-select 下拉菜单的 onChange 被触发。如果已经 selected 值再次被 selected，有没有办法配置 react-select 不触发 onChange 事件。

  handleOnChange(value) {
    console.log("test");
    this.setState({ multiValue: value });
  }
  render() {
    return (
      <div>
        <Select.Creatable
          options={this.state.options}
          onChange={this.handleOnChange.bind(this)}
          value={this.state.multiValue}
          showNewOptionAtTop={false}
        />
      </div>
    );
  }

正如您所看到的，即使值相同，控制台日志也会调用。 Codesandbox

Answer 1

你可以控制react的onChange上的值select。

我用箭头函数更改了你的 onChange 函数：

onChange={value => {
    if (value !== this.state.multiValue){
       this.handleOnChange(value);
    }
}}

codesandbox

Answer 2

我不确定您是否可以禁用更改事件，但作为一种解决方法您可以简单地保存所选项目的当前值，如果所选项目是前一个项目，则从更改处理程序中 return喜欢 @ahmetkilinc 答案，菜单项也有一个选项

isDisabled

您可以在选择一项时更改为 true，因此无法再选择它。

React-select onChange 当用户 select 相同选项时触发

React-select onChange trigger when user select same option

reactjs

react-select