在 table 中反应导入选定的值

Question

我用 API this.state = {items: [] }

得到的数据

我正在转移它。

然后我将这些值传输到 table。但是我获取不到我选择的数据的值？ "Open"按钮如何获取选中行的值我转移到table?

当我点击编辑按钮时，我是否获得了我选择的数据的值？

`
    this.state = {
    items: []
    };
    this.debtModalForm = this.debtModalForm.bind(this);


    debtModalForm() {
    this.setState(prevState => ({
    modal: !prevState.modal
    }));
    }

    render() {
    return(

       <div className={"animated fadeIn container-fluid"}>
                  <Row>
                    <Col>
                      <Card>
                        <CardHeader>
                          <i className="fa fa-align-justify" /> Customer Debt
                        </CardHeader>

                        <CardBody>
                          <Table hover bordered striped responsive size="sm">
                            <thead>
                              <tr>
                                <th width={"10"} />
                                <th width={"15"}>No</th>
                                <th style={{ display: "none" }}>User</th>
                                <th style={{ display: "none" }}>Key</th>
                                <th style={{ display: "none" }}>CreatedUserKey</th>
                                <th width={"40"}>Total Debt</th>
                                <th width={"40"}>Received amount</th>
                                <th scope={"row"}>Description</th>
                                <th width={"20"}>Payment Date</th>
                              </tr>
                            </thead>


                            <tbody>
                              {items.map(item => (

                                  <tr key={item.id}>
                                    <td>
                                      <Button
                                          block
                                          color="info"
                                          onClick={this.debtModalForm}
                                      >
                                        {" "}
                                        Edit
                                        {
                                          <Modal
                                              isOpen={this.state.modal}
                                              toggle={this.debtModalForm}
                                              backdrop={"static"}
                                          >
                                            <ModalHeader toggle={this.debtModalForm}>
                                              {this.props.customerInfo.customer.ID} number customer
                                            </ModalHeader>
                                            <ModalBody>

                                              <Row>
                                                <Col xs="2">TotalDebt</Col>
                                                <Col xs="6">
                                                  <Input
                                                      type={"text"}
                                                      placeholder={"Total Debt"}
                                                      name={"totalDebt"}
                                                      defaultValue={item.totalDebt}
                                                      //value={this.state.items.totalDebt}
                                                      onChange={this.handleChange}
                                                  />
                                                </Col>
                                              </Row>

                                              <Row>
                                                <Col xs="2">ReceivedAmount</Col>
                                                <Col xs="6">
                                                  <Input
                                                      type={"text"}
                                                      placeholder={"ReceivedAmount"}
                                                      name={"receivedAmount"}
                                                      onChange={this.handleChange}
                                                  />
                                                </Col>
                                              </Row>

                                              <Row>
                                                <Col xs="2">Description</Col>
                                                <Col xs="6">
                                                  <Input
                                                      type={"textarea"}
                                                      name={"description"}
                                                      defaultValue={item.description}
                                                      rows={"2"}
                                                      onChange={this.handleChange}
                                                  />
                                                </Col>
                                              </Row>

                                              <Row>
                                                <Col xs="2">Payment Date</Col>
                                                <Col xs="6">
                                                  <Input
                                                      type={"date"}
                                                      name={"paymentDate"}
                                                      defaultValue={item.paymentDate}
                                                      onChange={this.handleChange}
                                                  />
                                                </Col>
                                              </Row>

                                            </ModalBody>

                                            <ModalFooter>
                                              <Button
                                                  color="primary"
                                                  onClick={this.handleSubmit}
                                              > Kaydet
                                              </Button>{" "}
                                              <Button
                                                  color="secondary"
                                                  onClick={this.debtModalForm}
                                              > Close
                                              </Button>
                                            </ModalFooter>
                                          </Modal>
                                        }
                                      </Button>
                                    </td>

                                    <td>{item.id}</td>
                                    <td style={{ display: "none" }}>{item.user}</td>
                                    <td style={{ display: "none" }}>{item.debtKey}</td>
                                    <td style={{ display: "none" }}>
                                      {item.createduserKey}
                                    </td>
                                    <td>{item.totalDebt}</td>
                                    <td>{item.receivedAmount}</td>
                                    <td>{item.description}</td>
                                    <td>{new Date(item.paymentDate).toLocaleString()}</td>
                                  </tr>


                              ))}
                            </tbody>


                          </Table>
                        </CardBody>
                      </Card>
                    </Col>
                  </Row>
                </div>
    )
    }
`

Answer 1

首先，您要为 table 上的每一行创建一个模式，并且您正在使用 this.state.modal 来显示它在所有行之间共享并将一次显示所有模式，而不是，你可以只拥有模态，你可以在上面传递活动的选定行数据

如果想保留当前组件结构


 toggleActiveItemModal = (id)=>{
    this.setState({
    activeItemModal : this.state.activeItemModal === id ? undefined : id
    })
  }

 <Modal
   isOpen={this.state.activeItemModal === item.id}
   toggle={this.toggleActiveItemModal(item.id)}
>
...rest of the modal
</Modal>

在 table 中反应导入选定的值

React importing selected values in a table

key-value

stripe-payments

reactjs

reactstrap