javascript - 删除发生在打开模式之前并确认删除

Question

我创建了一个对话框，要求确认删除日志。但我在删除日志时遇到问题。当我单击删除时，日志将被删除，而不是打开一个模式，询问用户是否确定删除。如果他们准备删除，他们将单击删除按钮，然后日志应该被删除。就我而言，删除是在打开模式之前发生的。我做错了什么？

handleDelete(key) {
  this.setState({ show: true });
  const logDeleteConfirmation = (
    <DeleteConfirmation
      hideDialog={this.props.hideDialog}
      logKey={key}
      onDelete={this.props.deleteLog(key)}
    />
  );
  this.props.showDialog(logDeleteConfirmation);
}


render() {
  return(
  <div className="col-md-6 text-right">
    <a
      className="text-danger"
      onClick={() => this.handleDelete(log.get("_id"))}
    >
      Delete
    </a>
  </div>
  )
}


class DeleteConfirmation extends React.PureComponent {
  handleDelete(key) {
    console.log("key", key);
    this.props.onDelete(key);
    this.props.hideDialog();
  }

  render() {
    return (
      <Modal show onHide={() => this.props.hideDialog()} className="md-box">
        <h1>Are you sure want to delete?</h1>
          <button
            onClick={() => this.handleDelete(this.props.logKey)}
          >
            Delete
          </button>
      </Modal>
    );
  }
}

Answer 1

在第一个组件中，在 onDelete 中删除 (key)。

 <DeleteConfirmation
      hideDialog={this.props.hideDialog}
      logKey={key}
      onDelete={this.props.deleteLog(key)} //here
    />

只需 onDelete={this.props.deleteLog} 您调用此操作，而不是向其发送引用。