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框架的Modal组件。在显示模型后，当我选择“是”选项时，它将引发错误，TypeError：无法读取未定义的属性“ onDelete”

Answer 1

尝试一下：

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

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

1 个答案: