reactjs передать значение для визуального модального - PullRequest
Новая
       28

reactjs передать значение для визуального модального

0 голосов
/ 22 апреля 2020

enter image description here

Цель красной кнопки - удалить данные с этим кодом 

//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 , прежде чем делать это enter image description here

        {/* 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>

как мне это сделать?

1 Ответ

0 голосов
/ 22 апреля 2020

Если вам нужно отрендерить его только один раз и использовать его для всех элементов, рассмотрите возможность сделать следующее: Сохраните ожидающее удаление в вашем состоянии: 

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>
...