在不使用react表库的情况下，单击reactjs在表行上添加编辑字段

如何在不使用任何库（如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.map（（项，键）=>{return
{this.setState（{clientIsEditing:true}，this.edit（key，item））}>
{项目[1]}
{项目[2]}
{项目[3]}
{项目[4]}
})}

---

以上是显示表格的代码

this.state.students

包含数据库中的学生详细信息。我希望在单击时将特定的表行更改为一行输入字段。请帮忙。我是新来的世界反应

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

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

名称
年龄
等级
部分
{this.state.students.map（（项，键）=>{
const editField=（值，索引）=>{
//突变前克隆学生数据
const students=this.state.students.map（item=>（{…item}））
//按当前学生的索引更新字段
学生[关键][索引]=价值
//触发器重新渲染
this.setState（{students}）
}
返回(
{
//突变前克隆学生数据
const students=this.state.students.map（i=>（{…i，编辑：item.editing&&i==item}））
//切换当前学生的编辑标志（即表格行）
学生[key]。编辑=true；
//触发器重新渲染
这是我的国家({
clientIsEditing:true，//这可能不需要？
学生
})
}
}> 
{item.editing？编辑字段（e.target.value，1）}/>：{item[1]}
{item.editing？editField（e.target.value，2）}/>：{item[2]}
{item.editing？editField（e.target.value，3）}/>：{item[3]}
{item.editing？编辑字段（e.target.value，4）}/>：{item[4]}
)
})
}

---

-希望有帮助

我发现上面的代码有以下错误

TypeError:_this3.edit不是一个函数

，

“学生”没有定义没有未定义

（在onClick事件中）spread运算符抛出错误，

语法错误：意外标记，预期，

很抱歉，我是一个全新的编程反应者。。我会尝试一下。同时，你能告诉我在

项目中编辑的是什么吗？道具来自何处抱歉@dacre，它在onclick函数中抛出语法错误。当然，让我知道它是如何进行的-是的，
编辑最初未定义，但是在用户单击表行之后，
编辑
字段被添加到学生中，并根据所述切换定义为
true
/
false
。