在 reactjs 中单击时在表行上添加编辑字段，而无需使用 react-table 库

Question

如何在不使用任何库(如 react-table(的情况下更改在 JSX 表中单击的特定行以更改为输入可编辑行？

<table className="table-data">
<tbody>
<tr>
<th>Name</th>
<th>Age</th>
<th>Class</th>
<th>Section</th>
</tr>   {this.state.students.map((item,key) => {return

<Fragment key={key}>
<tr key={key} onClick={()=> 
{this.setState({clientIsEditing:true},this.edit(key,item))}}> 
<td>{item[1]}</td>    
<td>{item[2]}</td>    
<td>{item[3]}</td>  
<td>{item[4]}</td> 
</tr>  
</Fragment>
<tbody>
</table>})}

以上是显示表的代码。this.state.students有来自数据库的学生详细信息。我希望在单击时将特定表行更改为输入字段行。请帮忙。我是反应世界的新手。

Answer 1

如果我正确理解您的问题，似乎您需要跟踪其他状态以确定"学生"行当前是否处于编辑模式。也许你可以通过做这样的事情来实现这一点：

<table className="table-data">
<tbody>
<tr>
<th>Name</th>
<th>Age</th>
<th>Class</th>
<th>Section</th>
</tr>   
{  this.state.students.map((item,key) => {
const editField = (value, index) => {
// Clone students data before mutation
const students = this.state.students.map(item => ({ ...item }))
// Update field by index of current student
students[key][index] = value
// Trigger re-render
this.setState({ students })
}
return (
<tr key={key} className={ item.editing ? 'editing' : '' } onClick={()=> {
// Clone students data before mutation
const students = this.state.students.map(i => ({ ...i, editing : item.editing && i===item }))
// Toggle editing flag of this current student (ie table row)
students[key].editing = true; 
// Trigger re-render
this.setState({
clientIsEditing:true, // This might not be needed ?
students
})
}
}> 
<td>{ item.editing ? <input value={item[1]} onChange={ e => editField(e.target.value, 1) } /> : <span>{item[1]}</span> }</td>    
<td>{ item.editing ? <input value={item[2]} onChange={ e => editField(e.target.value, 2) } /> : <span>{item[2]}</span> }</td>    
<td>{ item.editing ? <input value={item[3]} onChange={ e => editField(e.target.value, 3) } /> : <span>{item[3]}</span> }</td>  
<td>{ item.editing ? <input value={item[4]} onChange={ e => editField(e.target.value, 4) } /> : <span>{item[4]}</span> }</td> 
</tr>  )
})
}
</tbody>
</table>

这也是一个有效的jsFiddle - 希望有帮助！