如何在点击Update按钮前阻止Main Panel的数值发生变更

核心逻辑是把编辑临时值和面板展示值做完全分离，不要让输入操作直接修改面板用的正式状态。

• 第一步：新增独立的临时状态承载编辑输入
  所有可修改的订单输入框都只绑定这个临时状态，输入变更只会更新临时值，不会影响面板渲染用的正式状态。示例代码（React场景）：

// Main Panel渲染依赖的正式订单状态
const [officialOrder, setOfficialOrder] = useState({amount: 100, count: 2})
// 输入框绑定的临时编辑状态，初始化和正式状态保持一致
const [editTempOrder, setEditTempOrder] = useState({...officialOrder})

• 第二步：给Update Order按钮绑定状态同步逻辑
  只有点击按钮时，才把临时状态的最新值同步给正式状态，触发Main Panel更新：

const handleUpdate = () => {
  // 可在这里加数值校验、接口提交等逻辑
  setOfficialOrder({...editTempOrder})
}

• 第三步：可选的重置逻辑
  如果需要取消编辑恢复原有值，直接把临时状态重置为当前正式状态即可：

const handleReset = () => {
  setEditTempOrder({...officialOrder})
}

如果是原生JS实现，逻辑完全一致：用两个变量分别存编辑值和展示值，输入时只改编辑值，点击按钮时再把编辑值赋值给展示值，同时刷新Main Panel的DOM内容。

内容的提问来源于stack exchange，提问作者Dgao