为什么React输入框onChange更新state hook会清空输入导致无法正常输入？

问题根源 #

你将Home组件直接定义在了App组件的函数内部，这是导致输入框内容被自动清空的核心原因。
只要App组件的状态发生更新（比如你在onChange里调用setWager/setUserSide更新了App的state），内部定义的Home组件构造函数就会被重新生成，React会判定这是一个全新的组件，直接卸载旧的Home实例、挂载新的实例，输入框自然会被重置，和你的onChange更新逻辑无关。
你写的简化测试应用可以正常运行，是因为测试代码里没有嵌套定义组件，所有逻辑都直接写在App组件内部，不存在组件被销毁重建的情况。

修复步骤 #

1. 将Home组件从App函数中挪到外部定义，Home需要用到的App内的状态、方法，都通过props传参使用。
2. 建议把输入框补全value属性绑定对应state，改为标准受控组件写法，避免受控/非受控逻辑冲突：

<input
  className="input"
  type="text"
  name="amount"
  placeholder="# of WC"
  value={newWager}
  onChange={(t) => setWager(t.target.value)}
/>
<input
  className="input"
  type="text"
  name="side"
  placeholder="1 or 2"
  value={userSide}
  onChange={(t) => setUserSide(t.target.value)}
/>

3. 提交表单清空内容时，不要用原生DOM的form.reset()操作，直接调用setWager('')和setUserSide('')更新state即可，更符合React的数据流逻辑，避免状态和DOM显示不一致。

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