Javascript 反应：防止在编辑行时重新呈现已排序的表

我在React中有一个表，允许对行进行排序和编辑，这是我在主组件的构造函数中设置的：

this.state = {
    rows: [
          {id: 1, name: 'John Doe', contacts: 'john.doe@gmail.com', rsvp: false, accepted: 0},
          {id: 2, name: 'Jane Doe', contacts: 'jane.doe@gmail.com', rsvp: false, accepted: 1},   
    ], 
    sortBy: {key: null, order: null}  
}

它允许排序（当用户单击桌面时，它将sortBy设置为实际值和顺序，然后通过道具将其传递给行列表组件）

行是这样呈现的（它们也作为属性传递）：

行本身是一组允许在状态下编辑信息的输入，例如，如果您更改名称，它会将名称更新为Zohn Doe，并在状态下更新它，切换行，并在用户仍在键入时重新呈现表

我已尝试在

shouldComponentUpdate（）

中返回

false

。它防止行切换，但也不允许更改输入中的值

---

我如何保持编辑输入但不更改顺序的能力

如果您使用

行

的

id

属性作为键，并根据

id

更新状态，React将不会卸载输入元素，即使数组重新排序，您也可以继续键入

不过，这可能不是理想的用户体验，因此您还可以创建一个自定义输入组件，该组件跟踪自己的输入状态，并且仅在模糊上传播更改（即，当模糊失去焦点时）：

类延迟输入扩展组件{ 状态={value:this.props.value}； componentWillReceiveProps（{value}）{ if（值！==this.state.value）{ this.setState（{value}）； } } handleChange=（事件）=>{ this.setState（{value:event.currentTarget.value}）； } 车把杆=（）=>{ this.props.onBlur（this.state.value）； } render（）{ 返回( ); } }

---

像这样使用它：

谢谢，这是一个有价值的改进，尽管在模糊之后仍然会出现排序，这是我想要防止的

//RowList component


let computedRows = rows;    

if(sortBy.key && sortBy.order) {
   computedRows = orderBy(computedRows, [sortBy.key.toLowerCase()], [sortBy.order])
}
   computedRows = computedRows.map((row, index) => 
                     <Row key={index} row={row} index={index} handleChange={handleChange} /> 
                  )

//key = 'name'
//order = 'asc'

Jane Doe (text input) · janedoe@gmail.com (text input)...
John Doe (text input)· johndoe@gmail.com (text input)...

class DeferredInput extends Component {
  state = { value: this.props.value };

  componentWillReceiveProps({value}) {
    if (value !== this.state.value) {
      this.setState({value});
    }
  }

  handleChange = (event) => {
    this.setState({value: event.currentTarget.value});
  }

  handleBlur = () => {
    this.props.onBlur(this.state.value);
  }

  render() {
    return (
      <input type='text' value={this.state.value} onChange={this.handleChange} onBlur={this.handleBlur}/>
    );
  }
}