Можно ли предотвратить дефолтный 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>
    );
  }
}

См. Рабочий пример здесь .