从 selected 中删除项目时如何在 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

他们没有为此举办任何活动。我遇到了同样的问题，但就我而言，我同时需要 added 和 removed 项。如果有人想要这两个值

import 'difference' from 'lodash/difference'
this.currentTags = []
handleChange = (options) => {
    const optionsValue = options.map(({ value }) => value)
    if (this.currentTags.length < options.length) {
      const addedElement = difference(optionsValue, this.currentTags)[0]
      this.currentTags.push(addedElement)
      console.log("addedElement",addedElement)
      //call custom add event here
    }
    else {
      let removedElement = difference(this.currentTags, optionsValue)[0]
      console.log("removedElement", removedElement)
      // call custom removed event here
      let index = this.currentTags.indexOf(removedElement)
      if (index !== -1) {
        this.currentTags.splice(index, 1)
      }
    }
  }

Answer 3

这段代码片段让我知道是否删除了任何项目我在 reat-select

的 onChange 事件上调用 handle change 函数

const [selectedGroups, setSelectedGroups] = useState([]);
const handleChange = (value) => {

const diifer = value.length <= selectedGroups.length;
if(diifer){
// item is removed 
}
var arr = value.map((object) => object.value);
setSelectedGroups(arr);

};

Answer 4

React Select 通过 props 向您公开各种 eventListeners。 onchange 函数属性现在具有以下签名。（值：ValueType，动作：ActionType）。

据此，您可以获得这些事件： select-option, deselect-option, remove-value, pop-value, set-value, 清除, create-option，通过它可以处理创建和删除。

请参考documentation

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

How to catch remove event in react-select when removing item from selected?

reactjs

react-select