reactjs - 反应在表格中导入选定的值
问题描述
我通过 API 获得的数据this.state = {items: [] }
我正在转移它。
然后我将这些值转移到表中。但是我无法获得我选择的数据的价值?如何使用转移到表格的“打开”按钮获取所选行的值?
当我单击编辑按钮时,我如何获得我选择的数据的值?
`
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>
)
}
`
解决方案
首先,您为表格上的每一行创建一个模态,并使用this.state.modal
它来显示它在所有行之间共享,并将一次显示所有模态,相反,您可以只在 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>
推荐阅读
- java - 页面没有在jsp中重定向
- php - 计算平均每月消耗量
- java - Java在对象中存储sql请求
- javascript - 带有 JSON 数据的 Javascript c3.js 或 billboard.js 如何获取其他图例标签
- javascript - 如何使用 TypeScript、Ant Design 和 Rollup 构建组件库
- javascript - 发出 http 请求
- python - 如何使用 GeoPandas 执行空间查询?
- swift - AVAudioPlayer 没有播放任何东西
- mongodb-atlas - MongoDB Stitch 的最大并行触发器执行限制
- c# - 函数,删除所有代码注释