为什么函数中没有括号

Question

任何帮助或提示将不胜感激。为什么在方法调用中不使用括号？如果我使用括号“onInputChange()”，则在加载页面时会调用该方法。调用后，如果我在输入框中键入任何内容并单击“onInputChange()”方法之外的区域，则不会调用该方法。

如果我不使用括号“onInputChange”，则加载页面时不会调用该方法，为什么会这样？但是加载后，我在输入框中输入一些内容，然后在调用方法“onInputChange”之外单击。

错误的方法：

  <input type="text" onChange={this.onInputChange()} />

正确的方法：

<input type="text" onChange={this.onInputChange} />

搜索栏.js

import React from 'react';

class SearchBar extends React.Component {
  onInputChange() {
    console.log('onInputChange');
  }

  render() {
    return (
      <div className="ui segment">
        <form className="ui form">
          <div className="field">
            <label>Image Search</label>
            <input type="text" onChange={this.onInputChange()} />
          </div>
        </form>
      </div>
    );
  }
}

export default SearchBar;

Answer 1

如果您在方法中使用括号，它将在渲染本身上执行。它不会等待事件执行。

带括号：将函数结果分配给 onChange 事件

不带括号：将函数分配给 onChange 事件

简单的 JavaScript 示例

function onValueChange(){
  console.log("onValueChange");
}

function onValueChange1(){
  return onValueChange;
}

<button onclick="onValueChange()">Without Parentheses</button>

<button onclick="onValueChange1()()">With Parentheses</button>

Answer 2

当代码从 JSX 编译为纯 JS 时，许多 props 只是对象属性。例如：

<input type="text" onChange={this.onInputChange()} />

这被编译为：

React.createElement("input", {
  type: "text",
  onChange: this.onInputChange()
});

就像在普通 JS 中一样，如果直接在 prop 或对象内部调用函数，则该函数将在第一次评估对象时调用。

<input type="text" onChange={this.onInputChange()} />

但是您不想立即调用该函数 - 您只想传递对该函数的引用，以便 React 可以调用它，因此您需要相当于

const obj = {
  prop: fn
};

在 JSX 的代码中，即：

<input type="text" onChange={this.onInputChange} />

没有括号。

请注意，你可以这样做

<input type="text" onChange={() => this.onInputChange()} />

但这并不是onInputChange立即调用 - 相反，它传递一个函数，该函数在调用时会调用onInputChange.