javascript - React - 处理状态数组内单元格的修改

Question

我正在创建 fixed-data-table-2 (npm) 的实现，其中编辑按钮将单元格更改为输入，可以对其进行编辑，然后保存(发布)。

但是有一个大问题......打字速度太慢，因为每次在单元格上触发 onChange 时我都会更新整个数组(处于状态)。

Event Handler (Table)

import reactUpdate from "react/lib/update";
onChangeEditableCell(field, rowIndex, newValue) {
    const data = reactUpdate(this.state.data, {[rowIndex]: {[field]: {$set: newValue}}})
    this.setState({data : data});
}

Event Handler (Cell)

onChange(e) {
    e.preventDefault();
    const newValue = e.target.value;
    this.props.onHandleInput(this.props.field, this.props.rowIndex, newValue);
}

render() {
    const {rowIndex, field, data, editMode, onHandleInput, ...props} = this.props;

    return (
        <Cell {...props}>
            {editMode ? <input onChange={this.onChange} className="text-cell-edit" type="text" value={this.getCell()} /> : data[rowIndex][field]}
        </Cell>
    );
}

这显然是一个坏主意...我怎样才能实现相同的目标但性能方面呢？

注意

onHandleInput(单元格的属性)是onChangeEditableCell(表格的函数)

PS

当用户点击保存时，我需要data数组来发布整个对象

Answer 1

在这种情况下我所做的就是让单元格拥有自己的状态，并随着每次按键而更新。然后使用 onblur 事件更新表级状态，该事件在输入失去焦点后触发。

在我看来，个人输入是向上拉动状态的一般做法的一个很好的异常(exception)。