Skip to content

文章

从原生 Javascript 更改 React 输入值

2020年7月27日 • 1 分钟阅读

从原生 Javascript 更改 React 输入值

简短答案:

function setNativeValue(element, value) {
    let lastValue = element.value;
    element.value = value;
    let event = new Event("input", { target: element, bubbles: true });
    // React 15
    event.simulated = true;
    // React 16
    let tracker = element._valueTracker;
    if (tracker) {
        tracker.setValue(lastValue);
    }
    element.dispatchEvent(event);
}

var input = document.getElementById("ID OF ELEMENT");
setNativeValue(input, "VALUE YOU WANT TO SET");

参考:https://stackoverflow.com/a/52486921/17360

详细答案:

React 覆盖了原生 Javascript 的 onChange 行为。触发 onChange 事件不会改变 React 中的输入字段值。对于 React 来说,该值仍然未改变,即使用户可以清楚地看到屏幕上的值已改变。上面的代码也会在 React 中触发更改。

作者:Chuck Conway 是一位 AI 工程师,拥有近 30 年的软件工程经验。他构建实用的 AI 系统——内容管道、基础设施代理和解决实际问题的工具——并分享他沿途的学习成果。在社交媒体上与他联系:X (@chuckconway) 或访问他的 YouTubeSubStack

↑ 返回顶部

你可能也喜欢