Javascript 删除发生在打开确认删除的模式之前

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

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>
    );
  }
}

handleDelete（键）{
this.setState（{show:true}）；
常量logDeleteConfirmation=(
);
this.props.showDialog（logDeleteConfirmation）；
}
render（）{
返回(
this.handleDelete（log.get（“\u id”））}
>
删除
)
}
类deleteComponent.PureComponent{
handleDelete（钥匙）{
控制台日志（“键”，键）；
此.props.onDelete（键）；
this.props.hideDialog（）；
}
render（）{
返回(
this.props.hideDialog（）}className=“md-box”>
确实要删除吗？
this.handleDelete（this.props.logKey）}
>
删除
);
}
}

在第一个组件中删除onDelete中的

（键）

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

只需

onDelete={this.props.deleteLog}

调用此操作，而不是向其发送ref