Question

代码：

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

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

问题：如果我尝试选择现有值并输入相同的值，则不会调用 onChange 函数。

示例：我在这个组件上输入 1。好的，onChange 被解雇了。然后我用鼠标选择这个值并再次输入 1 - onChange 没有触发。

问题：我应该怎么做才能在相同的输入上触发该函数？

谢谢！

Answer 1

您需要尝试使用 onInput 事件处理程序。即使您添加相同的值，它也会捕获事件。

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

反应输入 onChange 没有在相同的值上触发

1 个答案: