React受控输入绑定不存在state属性仍可输入的原因咨询

这是因为React对受控组件的value属性有特殊处理逻辑：

• 当输入框的value绑定值为undefined或null时，React会自动将该输入框视为不受控组件，把输入内容的控制权交还给浏览器原生机制。此时用户输入的内容会直接显示在输入框里，完全由浏览器处理，不受React state约束。

结合你的代码具体分析：

• 初始state里仅包含name和surname属性，state.surnameeee不存在，因此它的值是undefined。这时候React不会强制让输入框内容与这个undefined绑定，浏览器按原生逻辑处理输入，所以你输入的内容能正常显示。
• 你的onChange事件是根据输入框的name属性（即"surname"）更新state的，所以即便输入内容，state里的surname会被更新，但输入框绑定的是surnameeee，两者不对应，state的变化也不会影响这个输入框的显示。

如果想让这个输入框严格受控（保持空白），可以给value加空字符串兜底，比如：

value={state.surnameeee || ""}

此时value始终为字符串类型（空字符串），React会将其视为标准受控组件，每次输入都会被空字符串覆盖，输入框就会保持空白。

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