从所选项目中删除项目时如何在react-select中捕获删除事件？

Question

首先，感谢出色的工作。这让我轻松很多。那么在这里我想捕捉删除事件，我该怎么做？我阅读了文档但找不到删除事件

Answer 1

我不认为他们有这样的活动。他们只有onChange.

因此，要检测是否删除了某个选项，您必须将当前状态与onChange发出的新值进行比较。

例子：

handleOnChange(value) {
  let difference = this.state.selected.filter(x => !value.includes(x)); // calculates diff
  console.log('Removed: ', difference);                         // prints array of removed

  this.setState({ selected: value });
}
render() {
  return (
    <div>
      <Select
        multi={this.state.multi}
        options={this.state.options}
        onChange={this.handleOnChange.bind(this)}
        value={this.state.selected}
        showNewOptionAtTop={false}
      />
    </div>
  );
}

演示：https : //codesandbox.io/s/7ymwokxoyq

Answer 2

React Select 通过 props 向您公开各种事件监听器。onchange函数prop 现在具有以下签名。（值：ValueType，操作：ActionType）。

相应地，您可以获取以下事件： select-option、deselect-option、remove-value、pop-value、set-value、clear、create-option，通过它们可以处理创建和删除。

请参阅文档