为什么函数中没有括号

任何帮助或提示将不胜感激。为什么在方法调用中不使用括号？ 如果我使用括号“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;

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

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

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

简单的 JavaScript 示例

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

function onValueChange1(){
  return onValueChange;
}

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

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