为什么React on Change即使不失专注也能发挥作用

HTML中这样的函数只有在将焦点从输入字段中移出时才能工作：

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

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

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

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

触发回调的实际浏览器事件作为React事件的nativeEvent属性传递。通过将console.log作为回调传递给input元素的onChange，我们可以看到本机事件的类型是'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>

相关内容

最新更新

热门标签：