React受控表单输入更新循环疑问：event.target.value取值逻辑

当你按下按键输入字符"a"时，event.target.value返回的是输入框自身当前的实际值"a"，不是绑定的state初始空值，整个更新逻辑的完整流程是这样的：

• 组件首次渲染：useState('')初始化data为空字符串，输入框的value绑定data，所以输入框显示为空。
• 输入字符"a"：浏览器原生输入框先处理输入操作，将自身值更新为"a"，随后触发onChange事件。
• 执行handleChange函数：此时event.target指向当前的输入框DOM元素，它的value就是刚输入的"a"，调用updateData(value)将data的状态更新为"a"。
• React触发组件重新渲染：组件重新执行，此时data的值已经是"a"，输入框的value绑定这个新值，输入框显示更新后的内容，完成一次完整的更新循环。

你写的这个输入框属于React受控组件：输入框的显示值完全由React state控制，但输入事件是浏览器原生触发的，事件对象里的value是输入框的实时输入结果，React通过onChange捕获这个值，再同步到state中，最后通过重新渲染把state的值同步回输入框，形成一个双向同步的闭环。

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