为什么 onchange 在 React 和 HTML 上表现不同

Question

第一个例子

HTML：在下面的示例中，当文本框被修改和输入[=时触发console.log() 47=] 被按下。

<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：同前。 console.log() 当文本框被 修改 并且 enter 被按下时被触发。

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

React：在下面的示例中，console.log() 被即时触发。不需要按回车键，每次输入都会触发 console.log().

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

export default App;

Answer 1

这在 the React tutorial:

中有介绍

With JSX you pass a function as the event handler, rather than a string.

当您说 onChange={console.log(1)} 时，JavaScript 表达式 console.log(1) 会立即 求值（并且在 每个 呈现组件）并且 return 值被指定为事件处理程序（因为 console.log 的 return 值是 undefined （这不是函数），这是没用的）。

---

in the example below the console.log() is triggered on the fly.

见description of onChange in the documentation:

We intentionally do not use the existing browser behavior because onChange is a misnomer for its behavior and React relies on this event to handle user input in real time.