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}您可以调用此操作，而不是将ref发送给它。

在打开带有确认删除的模态之前发生删除

1 个答案: