javascript - react : prevent sorted table from re-rendering when a row is edited

Question

我在 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 设置为实际值和顺序，然后通过 props 将其传递给 RowList 组件)

行像这样呈现(它们也作为属性传递):

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

因此，如果您将 ket 设置为 name 并将 order 设置为 asc，则结果为

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

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

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

我试过在 shouldComponentUpdate() 中返回 false。它可以防止行切换，但也不允许更改输入中的值。

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

Answer 1

如果您使用 row的 id property 作为键，同时根据 id 更新状态，React 不会卸载输入元素，即使数组重新排序，您也可以继续输入。

虽然这可能不是理想的用户体验，因此您还可以创建一个自定义输入组件来跟踪其自身的输入状态并且仅传播模糊时的更改(即失去焦点时):

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}/>
    );
  }
}

像这样使用它:<DeferredInput value={..} onBlur={..}/> .