React使用useReducer时输入框onChange事件不触发是什么原因？

问题原因 #

onChange事件无法触发和你使用useReducer没有关联，useState和useReducer都是React官方提供的状态管理API，不会对事件触发逻辑产生影响。

你遇到的问题属于受控组件绑定逻辑异常，常见诱因有两类：

• 输入框的value属性没有和useReducer管理的状态字段绑定，导致输入框处于半受控状态，值变更无法被React的合成事件体系监听
• 选择日期时直接通过JS操作DOM修改输入框的值，而非通过dispatch action修改useReducer状态驱动视图更新，React不会捕获JS手动修改DOM产生的值变更，因此不会触发onChange回调

解决方案 #

• 将输入框的value属性绑定到useReducer管理的对应日期状态字段，做成标准受控组件
• 所有修改日期的操作（包括手动输入、点击日期面板选值）统一走dispatch修改reducer状态的逻辑，禁止直接操作输入框DOM赋值
• 如果需要监听日期变更，直接在reducer对应action的处理逻辑中执行后续操作，或是通过useEffect监听绑定到输入框的状态变量变化触发回调即可

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