我创建了一个表格,其中包含几个条目,每个条目都可以编辑(表单出现)。但是当我点击“编辑”时,表单总是显示在整个表格的下方。我希望它总是显示在选定行的下方。我该如何实现呢?我的代码中有一个bug,但我没有发现它:
class MyList extends Component {
//...Code
_editPolicy=(id)=>{
this.form()
}
form = (e) => {…}
render () {
return (
<div className="container">
<div className="col-sm-8 mx-auto">
<h2 className="text-center">Table</h2>
</div>
<table class="table caption-top">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">Type</th>
<th scope="col">Object</th>
<th scope="col">Creation Date</th>
<th scope="col">Edit</th>
<th scope="col">Delete</th>
<th scope="col"> Add </th>
</tr>
</thead>
<tbody>
<tr>
<td> - </td>
<td>
<ActionSelector
options={actionTypes}
setSelected={this.setSelectedType}
/>
</td>
<td>
<ActionSelector
options={actions}
setSelected={this.setSelectedAction}
/>
</td>
<td>-</td>
<td>-</td>
<td>-</td>
<td><button onClick={this.onSubmit} className="btn btn-success" type="submit">+</button></td>
</tr>
{ this.state.actions.map((action,index) => {
return (
<React.Fragment key={index}>
<tr>
<th scope="row">{index}</th>
<td>{action.actionType.label}</td>
<td>{action.description}</td>
<td>{action.creation}</td>
<td><button onClick={this._edit.bind(this, action['_id'])} class="btn btn-primary" type="submit">edit</button></td>
<td><button onClick={this._delete.bind(this, action.action_id)} class="btn btn-danger" type="submit">delete</button></td>
<td> -</td>
</tr>
</React.Fragment>
)
}
)}
</tbody>
</table>
{this.state.new_row.type.value === „Edit“ ? (
<div>
{this.form(this.state.new_row)}
</div>) : (
)}
</div>
)
}}
我只发布了最相关的代码。如果你需要更多,那么我可以发布我的整个类。
1条答案
按热度按时间rta7y2nd1#
你需要两样东西:
1.一个变量,用于保存选中当前编辑按钮的行的索引。
1.将呈现表单的逻辑移动到您通过该.map函数呈现操作的部分:
在上面的中,我们将当前行的索引传递给
onEdit
方法。因此,当点击编辑按钮时,我们现在知道它是哪个索引(哪一行)。然后在呈现部分(this.state.actions.map
),我们将呈现的每一行的索引与按下编辑按钮的行的索引进行比较。如果两者匹配,我们就呈现该行正下方的表单。你的代码很不完整,而且有太多的噪音在里面,因此我把代码片段而不是一个完整的答案。2我建议你创建一个更简单的表格,只有2列和一个编辑按钮,这样你会得到更好的答案。
我强烈建议您熟悉以下几点:
1.使用钩子(
useState
)代替class
组件。1.确保你的html是有效的(在表中不要使用div,只把它用作
<td>
或<th>
元素的子元素。