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需要一个函数对象，而不是一个函数调用。这与分配函数Vs指定其返回值相同。

function foo(){
   return 5*5;
}

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

在情况1中，您正在分配函数，在情况2中，您指定了foo（）的返回值，即25。因此，在上述代码片段2的情况下，函数将被调用。

Answer 2

在reactJs中如果直接在组件中编写函数，则表示“this”关键字是指window。这就是为什么它在页面加载时加载。

所以，试试下面的事情：

将构造函数方法转换为组件，然后绑定您创建的函数。
并且在制作功能时也使用“this”关键字。

我希望我确实理解了你的问题，尽管你可以尝试以下建议或明确你的问题。

constructor(props) {
        super(props);
this.handleRemoveAll = this.handleRemoveAll.bind(this);
    this.handleRemoveAll = () => { 
        alert('Are you sure you want remove all?');
    };
}

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

2 个答案: