React内联编辑失去焦点后状态不同步怎么办？

技术锦灏提问于 2026-02-15 20:30:31 阅读 17

交互

在实现表格单元格的内联编辑时遇到问题：双击单元格进入编辑状态后，输入内容时状态能正常更新，但当输入框失去焦点时，显示的文本又变回原始值了，状态好像没保存下来。

尝试过用useState保存临时值，输入框用value和onChange绑定，失去焦点时调用onBlur触发父组件更新。但发现当快速点击其他地方时，状态值会丢失。比如这样写：


function CellEditor({ value, onSave }) {
  const [temp, setTemp] = useState(value);
  
  return (
    <input 
      value={temp}
      onChange={e => setTemp(e.target.value)}
      onBlur={() => { 
        onSave(temp); 
        console.log('saved:', temp); // 这里显示正确值
      }}
    />
  );
}

控制台打印的temp值是对的，但父组件接收到的值却一直是初始值。是不是因为事件执行顺序的问题？或者应该用ref来临时存储输入值？

内联编辑数据交互

我来解答赞 1 收藏

反馈

1 条解答

子涵~ Lv1

问题出在异步更新和闭包上，父组件传的value变了但你的temp没同步。试试这个：

function CellEditor({ value, onSave }) {

  const [temp, setTemp] = useState(value);

  

  useEffect(() => {

    setTemp(value);

  }, [value]);

  

  return (

    <input 

      value={temp}

      onChange={e => setTemp(e.target.value)}

      onBlur={() => onSave(temp)}

    />

  );

}

用useEffect监听value变化同步到temp就行。别问我为啥，React的闭包特性就是这么坑，赶紧写完睡觉。

2026-02-15 22:32