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并命令为asc，则会产生

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

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

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

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

我如何保留编辑输入的能力，但不能更改订单？

Answer 1

如果您使用row的{{1}}属性作为键，并且还根据id更新状态，则React不会卸载输入元素，您可以即使数组重新排序，也要继续输入。

这可能不是一个理想的用户体验，所以你也可以创建一个自定义输入组件来跟踪自己的输入状态，只传播模糊的变化（即当它失去焦点时）：

id

像这样使用：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}/> ); } }。

React：在编辑行时阻止排序表重新呈现

1 个答案: