Question

红色按钮的目的是使用此代码删除数据

//delete function
  DeleteData(r) {
    const _idData = r.currentTarget.value;
    const DelData = this.deleteDataFromAPINODE(
      "/whStock/deleteWhStock/" + _idData
    ).then((res) => {
..
  }

//red button to triger modal delete
<Button color="danger" value={e._id} onClick={this.toggleDanger} title="Delete">

//toggleDanger
  toggleDanger(e) {
    const value = e.currentTarget.value;
    const aEdit = this.state.all_data.find((e) => e.owner_id === value);
    const Dataid = aEdit.owner_id;
    const Datapo = aEdit.po_number;
    this.setState({
      danger: !this.state.danger,
    });
  }

但是我想添加模式确认删除/取消并在执行之前添加信息具有PO号的所有者ID

        {/* Modal confirmation delete */}
        <Modal isOpen={this.state.danger}
          toggle={this.toggleDanger}
          className={"modal-danger " + this.props.className}>
          <ModalHeader toggle={this.toggleDanger}>
            Delete Material Stock Confirmation
          </ModalHeader>
          <ModalBody>Are you sure want to delete {insert owner id} - {PO Number}?</ModalBody>
          <ModalFooter>
            <Button color="danger" value={e._id} onClick={(r) => this.DeleteData(r, "value")}>
              Delete
            </Button>
            <Button color="secondary" onClick={this.toggleDanger}>
              Cancel
            </Button>
          </ModalFooter>
        </Modal>

我该怎么做？

Answer 1

如果只需要渲染一次并将其用于所有项目，请考虑执行以下操作：将待删除的内容保存为您的状态：

state = {
  danger: false,
  pendingDelete: '',
}

然后，创建用于打开和关闭的函数，这些函数也会使pendingDelete发生变化：

  openDeleteModal = (e) => {
    const value = e.currentTarget.value;
    const aEdit = this.state.all_data.find((e) => e.owner_id === value);
    const Dataid = aEdit.owner_id;
    const Datapo = aEdit.po_number;
    this.setState({
      danger: true,
      pendingDelete: Dataid //OR save the data, that will be used for the delete function
    });
  }

closeDeleteModal = () => {
  this.setState({
    danger: false,
    pendingDelete: '',
  })
}

最后，以模态使用此数据：

<Modal isOpen={this.state.danger}
  toggle={this.closeDanger}
  className={"modal-danger " + this.props.className}>
  <ModalHeader toggle={this.closeDanger}>
    Delete Material Stock Confirmation
  </ModalHeader>
  <ModalBody>Are you sure want to delete {insert owner id} - {PO Number}?</ModalBody>
  <ModalFooter>
    <Button color="danger" value={e._id} onClick={(r) => this.DeleteData(r, this.state.pendingDelete)}>
      Delete
    </Button>
    <Button color="secondary" onClick={this.closeDanger}>
      Cancel
    </Button>
  </ModalFooter>
</Modal>

reactjs将值传递给呈现的模态

1 个答案: