反应输入 onChange 不会触发相同的值答案

【问题标题】：React input onChange did'nt fire on same value反应输入 onChange 不会触发相同的值
【发布时间】：2021-05-25 06:28:12
【问题描述】：

代码：

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 没有触发。

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

谢谢！

【问题讨论】：

也许可以试试onInput 事件。即使您添加相同的值，它也会捕获事件。
@PriyankKachhela 好吧，它可以工作，但是反应控制组件应该定义 onChange 处理程序。如果我用 nop 功能添加它 - 它完美无缺。谢谢，请添加为anawer！

标签： reactjs typescript events input

【解决方案1】：

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

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

【讨论】：