React 功能组件中按钮 onClick 上的回调函数

Question

我有两个在 jsx 中单击按钮时调用 onRemove 方法的示例。然而，虽然没有编译错误，但示例 2 并没有在屏幕上呈现任何内容，这意味着它基本上是错误的。

示例 2 有什么问题，为什么我们需要传递另一个匿名函数而不是在按钮单击时调用 {onRemove(item.id)}？

eg1：

function onRemove(id) {
    //
    }
    
    <button type="button" onClick={() => onRemove(item.id)}>

eg2：

    function onRemove(id) {
    //
    }
    
    <button type="button" onClick={onRemove(item.id)}>

编辑： 类似地，onChange 的工作方式类似于上面的 eg2。

const handleChange = (search) => {
    //
  }; 
<input
        id="search"
        type="text"
        onChange={handleChange}/>

Answer 1

是的，在您的情况下，第二个示例确实不正确。我第一次遇到这个问题时也很吃惊，因为我希望它的行为与 HTML 中的一样......

<button onclick="myFunction()"></button>

...但是 JSX 不是这样工作的。这是因为，与 HTML 不同，onclick 的值作为普通 JavaScript 执行，在 JSX 中它作为回调函数传递。请记住，JSX 不是 HTML，而是在构建过程中转译回 JS 的 XML 语法。

function Component(props) {
  return <button type="button" onClick={() => onRemove(item.id)}/>
}

将被转译为

function Component(props) {
  return React.createElement('button', {onClick: () => onRemove(item.id), type: 'button'}, null);
}

我想你现在可以明白为什么有必要将函数调用包装到匿名函数中，因为它不会传递函数，而是传递函数返回的任何内容。当您真正想要这样做时，这很有用，例如在这种情况下：

function Component(props) {
  return <div>{myFunction()}</div>
}

所以这就是第二个示例不起作用的原因。如果您想更深入地了解这一点，我建议您阅读this 和this。