时间戳

首页 > 解决方案 > 为什么即使没有失去焦点，React onChange 也能工作？

javascript - 为什么即使没有失去焦点，React onChange 也能工作？

问题描述

只有当您将焦点移出输入字段时，HTML 中的此类函数才会起作用：

<input onchange="changeInput()" type="text"></input>

但是在 React 中，onChange即使没有失去焦点，受控输入也会触发：

<input value={this.state.textVal} onChange={this.changeInput} type="text"></input>

这是因为合成事件还是其他原因？我在任何地方都找不到明确的答案。

标签： javascripthtmlreactjs

解决方案

触发回调的实际浏览器事件作为nativeEventReact 事件的属性传递。通过console.log作为回调传递给onChange元素的input，我们可以看到原生事件的类型是'input'。

可以使用 JavaScriptaddEventListener方法复制此行为：

const setValue = ({ target }) => {
  document.getElementById("myresult").innerHTML = target.value;
}

document.getElementById("myinput").addEventListener("input", setValue);
<input type="text" id="myinput">
<p id="myresult"></p>

推荐阅读