由于焦点 onBlur 更改，如何在刷新更新期间捕获反应事件? [英] How to capture react events during a refresh update due to a focus onBlur change?

问题描述

代码:https://codesandbox.io/embed/react-table-editable-content-ggvcy

当我更新表格中的文本并且我有一个 onBlur 事件来将数据更改持久化为我希望我的用户单击保存按钮的状态时，保存按钮的单击会丢失.

When I update the text in my table and I have an onBlur event to persist that data change to state I want my user to click a save button the save button click is missed.

我相信它是因为data的状态变化导致表正在刷新.

I believe it is missed because the table is refreshing due to the state change of data.

有人可以帮助我了解在触发 onBlur 重新渲染时捕获 onClick 事件的方法吗?

Can anybody help me understand ways to capture the onClick event when it triggers the onBlur rerender?

推荐答案

const updateCellData = (idx, id, value) => {
    console.log(`idx: ${idx}, id: ${id}`);
    const newData = [...data];
    newData[idx][id] = value;
    console.log(`prev: ${data[idx][id]}, new: ${newData[idx][id]}`);
    // setData(newData);
};

我意识到我正在改变状态，因为我没有深度复制对象.奇怪的是，这适用于我的用例，因为我的数据是服务器端，它会根据需要更新，但我永远不会建议直接改变状态.

I realized that i am mutating the state because i am not deep copying the object. Strangely this works for my use case since my data is server side and it updates as needed but I would never recommend directly mutating the state.

这篇关于由于焦点 onBlur 更改，如何在刷新更新期间捕获反应事件?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！