react table里跳转页面_在reactjs中单击时在表行上添加编辑字段，而无需使用react-table库...

How to change a particular row that is clicked in JSX table to change to input editable row without using any libraries such as react-table?

Name	Age	Class	Section

{this.setState({clientIsEditing:true},this.edit(key,item))}}>

{item[1]}{item[2]}{item[3]}{item[4]}})}

the above is the code to display table. this.state.students has the student details from db. I want the particular table row to be changed to a row of input fields on click. Kindly help. I'm new to the world of react.

解决方案

If I understand your question correctly, it seems like you need to track additional state to determine if a "student" row is currently in editing mode or not. Perhaps you could achieve that by doing something like this:

Name	Age	Class	Section

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

{

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

})

}

}>

{ item.editing ? editField(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 ? editField(e.target.value, 4) } /> : {item[4]} } )

})

}