如何在 antd Modal 组件中进行异步操作？答案

【问题标题】：How to perform async opeartion in antd Modal component?如何在 antd Modal 组件中进行异步操作？
【发布时间】：2019-02-28 05:57:41
【问题描述】：

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 框架的模态组件。当我选择是选项显示模型后，它会引发错误，TypeError: Cannot read property 'onDelete' of undefined

【问题讨论】：

当您在渲染方法中绑定 onDelete 函数时，您将失去作用域。将您的 this.showDeleteConfirm.bind(this) 移动到构造函数中，您应该会很好。
我做到了，但它不起作用。
您的模态代码在哪里？您可以使用模态发布您更新的代码吗？
更新了@Chase DeAnda。

标签： reactjs antd

【解决方案1】：

试试这个：

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

【讨论】：