React受控input输入相同值时onChange事件未触发如何解决？

问题根因 #

React 受控组件的onChange事件默认仅在输入框的实际值发生变更时触发。当你选中原有内容输入相同字符时，输入框最终值与传入的props.value完全一致，React 判定值无变化，因此不会触发绑定的onChange回调。

解决方案 #

将事件绑定从onChange替换为onInput即可。onInput会在用户完成输入动作（打字、选中替换、粘贴等）后立刻触发，不校验输入前后的值是否相等，刚好匹配需求。

修改后的完整代码如下：

import { useCallback } from 'react';

function SingleInput(props: {value: string; onChanged: (value: string) => void}) {
    const handleInput = useCallback(
        (e: React.FormEvent<HTMLInputElement>) => {
            const newValue = e.currentTarget.value;
            console.log("onInput fired with value", newValue) /*FIXME Убрать!*/;
            props.onChanged(newValue);
        },
        [props.onChanged]
    );

    return <input type="text" maxLength={1} value={props.value} onInput={handleInput} />;
}

额外优化说明 #

原代码中useCallback的依赖数组包含多余的props.value，因为回调逻辑内没有用到这个属性，移除后可以避免不必要的回调函数重建，优化组件性能。

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