是否可以防止默认的onDeselect，（选择输入多个蚂蚁设计）？

Question

我想做的是控制 onDeselect 事件，我想在事件结束之前问一个问题。然后如果用户接受删除该选项可以被删除。

这是我的选择和道具：

<Select
       mode="multiple"
       style={{ width: '100%' }}
       placeholder="Select at least one"
       allowClear={false}
       onSelect={this.addNewClassroom}
       onDeselect={this.deleteClasroom}
      >
        {classroomSelect}
</Select>

这是我使用的函数：

deleteClasroom(val, e){

    //e.preventDefault();

    confirm({
      title: 'Are you sure?',
      content: 'Delete this...',
      onOk() {
        //  -----------> delete the item 
      },
      onCancel() {
        //  -----------> keep the item 
       },
    });
  }

Answer 1

onDeselect 发生在事件之后并且不公开这样的功能。但是，您可以将组件转换为受控组件并实现您的用例。

class App extends Component {
  constructor() {
    super();
    this.state = {
      values: ['a10', 'c12'],
    };
  }

  onDeselect = (value) => {
    const that = this;
    confirm({
      title: 'Are you sure delete this task?',
      content: 'Some descriptions',
      okText: 'Yes',
      okType: 'danger',
      cancelText: 'No',
      onOk() {
        that.setState(prevState => ({
          values: prevState.values.filter(item => item !== value),
        }));
      },
      onCancel() {
        ;
      },
    });
  }

  onSelect = (value) => {
    console.log(value)
    this.setState(prevState => ({
      values: [...prevState.values, value],
    }));
  }

  render() {
    return (
      <div>
        <Select
          mode="multiple"
          style={{ width: '100%' }}
          placeholder="Please select"
          value={this.state.values}
          onSelect={this.onSelect}
          onDeselect={this.onDeselect}
        >
          {children}
        </Select>,
      </div>
    );
  }
}

See working example here.