reactjs - 如何在 antd Modal 组件中执行异步操作？

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) 作为按钮删除的 Onclick 传递将起作用。但我想在删除项目之前显示一个模态，并且我使用了 antd ui 框架的模态组件。当我选择"is"选项时显示模型后，它会引发错误，TypeError:无法读取未定义的属性“onDelete”

Answer 1

试试这个:

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