Question

继续Question，如果我当前正在编辑行（通过状态），那么如何仅在编辑后保持输入文本框为高亮显示，并且即使单击下一行也保持高亮显示？ >

我的代码如下：

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

Answer 1

有几种方法可以实现此目的-一种方法是跟踪每个学生字段的其他状态以这种方式显示突出显示。一种可能是通过以下方式使用与当前解决方案类似的模式：

render() {
    return (<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

      // Extend state for student to tract editing history per field
      students[key].edited = students[key].edited || []
      students[key].edited[index] = true

      // Trigger re-render
      this.setState({ students })
    }

    // Returns true if the field by index has been edited. This is used for styling the td
    const isEdited = (index) => {
        const students = this.state.students.map(item => ({ ...item }))
        return (students[key].edited && students[key].edited[index] === true)
   }

   // Apply 'editing' class to the cell if it has been previously edited
   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 className={ isEdited(1) ? 'edited' : '' } >{ item.editing ? <input value={item[1]} onChange={ e => editField(e.target.value, 1) } /> : <span>{item[1]}</span> }</td>    
    <td className={ isEdited(2) ? 'edited' : '' } >{ item.editing ? <input value={item[2]} onChange={ e => editField(e.target.value, 2) } /> : <span>{item[2]}</span> }</td>    
    <td className={ isEdited(3) ? 'edited' : '' } >{ item.editing ? <input value={item[3]} onChange={ e => editField(e.target.value, 3) } /> : <span>{item[3]}</span> }</td>  
    <td className={ isEdited(4) ? 'edited' : '' } >{ item.editing ? <input value={item[4]} onChange={ e => editField(e.target.value, 4) } /> : <span>{item[4]}</span> }</td> 
    </tr>  )
  })
  }

  </tbody>
  </table>)
  }

要完成此操作，您只需要添加一个CSS选择器，如下所示：

https://jsfiddle.net/7uspaot5/

对于有效的演示，please see this jsFiddle-希望这会有所帮助！

在编辑时突出显示文本框

1 个答案: