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

Question

当我在下拉菜单中选择一个已经选择的值时，会触发react-select下拉菜单的onChange。是否有一种方法可以配置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

你可以控制onChange的值。

我用箭头函数改变了你的onChange函数:

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

codesandbox

Answer 2

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

isDisabled

当一个项目被选中时，你可以将其更改为true，因此它不能再被选中。