当在 react 表单中使用 `onblur` 更新 `usestate` 状态时，若状态定义在父组件（如 `app`）中，会导致整个父组件重渲染，打断 dom 事件流，使相邻按钮首次点击失焦、需二次点击才生效；将状态移至子组件内部可彻底解决该问题。
这个问题的本质是 React 状态提升引发的意外重渲染。在原始代码中，gridLine 状态定义在 App 组件顶层，而 TopBanner 是其内嵌函数组件（非独立 React 组件）。每当 onBlur 触发 setGridLine，App 整体重新执行 —— 包括重新创建 TopBanner 函数、重建所有 JSX 结构。这会导致浏览器在用户点击按钮的瞬间，DOM 节点被 React 替换（即使视觉无变化），原点击事件目标丢失，从而“吞掉”第一次点击，仅在第二次点击时才真正触发 onClick。
✅ 正确解法：将状态声明下沉至实际使用它的 UI 组件作用域内，即 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>
<input
type="text"
name="ticketTime"
defaultValue={gridLine.hours}
onBlur={setHours}
data-required="1"
/>
</div>
<div className="submit">
<a id="btnAddHours" href="#" className="btn" onClick={addLine}>Add</a>
</div>
</div>
);
};
return <TopBanner />;
}? 关键原理说明：
- TopBanner 虽为函数，但在 App 中每次渲染都会被重新定义，但因其内部持有 useState，React 将其识别为具有独立状态生命周期的逻辑单元；
- 状态更新仅触发 TopBanner 子树重渲染，App 本身不再重复执行，避免了外层节点销毁重建；
- 按钮 DOM 节点得以稳定保留，点击事件自然连续响应。
⚠️ 注意事项：
- 不要混用 defaultValue 和受控模式：当前方案使用 defaultValue + onBlur 属于「非受控输入 + 显式同步」，适用于简单表单；若需实时校验或联动，建议改用完全受控模式（value={gridLine.hours} + onChange），并确保 value 始终与 state 同步；
- 若 gridLine 确实需跨多个组件共享（如父级提交或全局状态），请使用状态管理库（如 Jotai、Zustand 或 Context API），而非强行提升 useState —— 这是 React 设计哲学所鼓励的「状态就近原则」；
- useCallback 对 setHours 和 addLine 非必需（无性能瓶颈），但若后续加入复杂依赖或作为 props 透传，建议包裹以避免子组件不必要的重渲染。
总结：React 的高效依赖于细粒度的更新边界。将状态置于最接近消费位置的组件中，既是最佳实践，也是规避此类“点击失效”问题的根本之道。
