Как выполнить асинхронную работу в модальном компоненте antd?

Question

import {Button, Modal} from 'antd';

const confirm = Modal.confirm;

class MeetupDetail extends Component {
    showDeleteConfirm() {
    confirm({
      title: 'Are you sure delete this meetup?',
      okText: 'Yes',
      okType: 'danger',
      cancelText: 'No',
      onOk() {
        this.onDelete();
      },
      onCancel() {
        console.log('Cancel');
      },
    });
  }

onDelete() {
    let meetupId = this.state.details.id;
    axios.delete(`http://localhost:3000/api/meetups/${meetupId}`)
      .then(response => {
        this.props.history.push('/');
      })
      .catch(err => console.log(err));
  }

    render(){
        return(
  <div style={{ display: 'flex', justifyContent: 'space-between', paddingTop: '20px' }}>
          <Button type="primary" icon="edit">Edit</Button>
          <Button onClick={this.showDeleteConfirm.bind(this)} type="danger" icon="delete">Delete</Button>
        </div>
        ) 
    }
}

Передача this.onDelete.bind (this) в качестве щелчка для удаления кнопки будет работать.Но я хочу показать модальный режим перед удалением элемента, и я использовал модальный компонент в среде пользовательского интерфейса.После отображения модели при выборе опции «Да» возникает ошибка: ошибка типа: невозможно прочитать свойство «onDelete» с неопределенным значением

Answer 1

попробуйте это:

confirm({
  ...
  onOk: () => {
    this.onDelete();
  },
});