为什么 onchange 在 React 和 HTML 上的行为不同

Question

第一个例子

HTML：在下面的示例中，当文本框被 modified 并按下 enter 时，将触发 console.log()。

<input type="text" onchange="console.log(1)" />

React：在下面的示例中，console.log() 仅在加载页面时触发一次。

function App() {
  return (
    <input type="text" onChange={console.log(1)} />
  );
}

export default App;

第二个例子

在此示例中，我将 console.log() 包装在函数内。

HTML：与以前相同。当文本框被

modified并且按下enter时，console.log()被触发。

<script>
    const foo = () => {console.log(1)}
</script>
<input type="text" onchange="foo()" />

React：在下面的示例中，console.log() 被触发

即时。不需要按 Enter 键，每个输入都会触发 console.log()。

function App() {
  const foo = () => {console.log(1)}
  return (
    <input type="text" onChange={foo} />
  );
}

export default App;

Answer 1

这在

React 教程中有所介绍：

使用 JSX，您可以传递一个函数作为事件处理程序，而不是一个字符串。

当您说

onChange={console.log(1)}

 时，JavaScript 表达式 

console.log(1)

 会立即计算

（并且在组件的 每个 渲染上），并且返回值被指定为事件处理程序（因为 console.log 的返回值为

 undefined

（这不是函数），这个没用）。

---

在下面的示例中，console.log() 是动态触发的。

请参阅文档中

onChange

的描述

：

我们故意不使用现有的浏览器行为，因为 onChange 是对其行为的用词不当，而 React 依赖此事件来实时处理用户输入。

Answer 2

onchange

- 当元素发生变化以及元素失去焦点时触发。仅当元素更改并按“Enter”或单击外部触发时才会触发以下事件。

function triggerChange(){
  console.log("Event Triggered!!!");
}

<input type="text" onchange="triggerChange()">

HTML -

oninput

事件，React onChange 的行为类似于 HTML 中的 oninput HTMLevent。

let count =0 ;

function trigggerChange(){
  count++;
  console.log("Event triggered every time",count);

}

<input type="text" oninput="trigggerChange()">

React -

onChange

- 接受事件处理函数并在每次输入更改时触发（类似于 HTML 中的 oninput 事件） React 接受一个事件处理函数，当输入改变时它将被触发。

function handleChange(e){
  console.log("Input text", e.target.value);
}

<input type="text" onChange ={handleChange}>

注意：

为了理解功能，React onChange 的行为与 oninput HTML 事件类似。