为什么按钮点击事件在页面加载时自动触发 - React.js

Question

以下是用React.js.

我知道将函数传递给onClick事件而不是调用函数可以解决此问题。

但我无法理解的是，为什么onClick事件会在页面加载本身时触发，并通过调用该方法来提示警报handleRemoveAll()。这是因为this.handleRemoveAll()在上下文中被调用吗global？我正在尝试了解如何react.js运作。

class IndecisionApp extends React.Component {
  render() {
      const options = ['One', 'Two', 'Three'];
      return (
        <div>
            <Options options={options}/>
        </div>
      )
  }
}
class Options extends React.Component {
    handleRemoveAll() { 
        alert('Are you sure you want remove all?');
    };
    render() {
       return (
            <div>
                <button onClick={this.handleRemoveAll()}>Remove All</button>
                {
                    this.props.options.map((option) => <Option key={option} optionText={option} />)
                }
            </div>
        )
    }
}
ReactDOM.render(<IndecisionApp />, document.getElementById('app'));

Answer 1

onClick 需要一个函数对象，而不是函数调用。这与分配函数与分配其返回值相同。

function foo(){
   return 5*5;
}

1) var obj = foo; 2)var obj = foo();

在情况 1 中，您要分配函数，在情况 2 中，您要分配 foo() 的返回值，即 25。因此，在情况 2 中，如上面的代码片段，将调用该函数。