当在 react 表单中使用 `onblur` 更新父组件级 `usestate` 时，整棵组件树会重新渲染，造成焦点丢失与交互延迟；将状态管理下放到子组件内部可避免此问题。
在你提供的代码中，gridLine 状态定义在 App 组件顶层，而 onBlur 处理函数 setHours 触发后会调用 setGridLine，导致整个 App 重新渲染。由于 TopBanner 是 App 的内联函数组件（非独立命名组件），每次 App 渲染都会创建一个全新的 TopBanner 函数实例 —— 这意味着其内部 DOM 节点被完全卸载并重建，包括你刚刚点击但尚未获得焦点的按钮。因此用户第一次点击时，事件目标尚在旧 DOM 树中；第二次点击才作用于新渲染的、已就绪的按钮节点，表现为“必须点两次”。
✅ 正确解法是：将状态逻辑下沉至实际使用它的 UI 组件层级，即把 useState 移入 TopBanner 内部：
function App() {
const TopBanner = () => {
// ✅ 状态属于 TopBanner 自身，仅触发局部重渲染
const [gridLine, setGridLine] = useState({ hours: "" });
const setHours = (event) => {
setGridLine(prev => ({ ...prev, hours: event.target.value }));
};
const addLine = (e) => {
e.preventDefault();
alert(`I am clicked, value = ${gridLine.hours}`);
};
return (
<div>
<div className="form-control">
<label>Time Spent</label>
{/* 使用 value 而非 defaultValue，使其成为受控组件 */}
<input
type="text"
name="ticketTime"
value={gridLine.hours} // ? 关键：受控输入
onChange={setHours} // ? 推荐：用 onChange 实时同步（更符合 React 惯例）
onBlur={setHours} // ? 或保留 onBlur，但确保状态在组件内
data-required="1"
/>
</div>
<div className="submit">
<a id="btnAddHours" href="#" className="btn" onClick={addLine}>Add</a>
</div>
</div>
);
};
return <TopBanner />;
}? 关键改进说明：
- 状态隔离：useState 移至 TopBanner 内部后，setGridLine 仅导致 TopBanner 子树重渲染，不会影响 App 其他部分（即使有），按钮 DOM 实例得以保留，点击立即生效。
- 受控组件原则：将 defaultValue 改为 value 并配合 onChange（或 onBlur），使输入框真正由 React 状态驱动，避免 DOM 值与状态不同步的风险。
- 避免内联组件陷阱：若未来需复用 TopBanner，应将其提取为独立命名组件（如 const TopBanner = () => { ... } → function TopBanner() { ... }），防止因闭包或引用变化引发意外重渲染。
⚠️ 注意事项：
- 若 gridLine 确实需跨多个兄弟组件共享（如同时被 TopBanner 和 SummaryPanel 使用），则不应强行提升到共同父组件，而应采用状态管理库（如 Jotai、Zustand）或 React Context + useReducer，避免不必要的全局重渲染。
- onBlur 适合“提交式”校验（如失焦后格式化），而 onChange 更适合实时反馈；根据业务场景选择，二者均可在组件内稳定工作。
通过将状态锚定在最小必要作用域，即可彻底解决双击响应问题，同时提升应用性能与可维护性。
