为什么在渲染时调用 onClick？

Question

import React, { Component } from 'react';

class Bookmark extends Component {
  constructor(props) {
    super(props);

    this.handleClick = this.handleClick.bind(this);
  }

  handleClick() {
    console.log(this.props.idt);
  };

  render() {
    return (
      <div className='bookmark' onClick={this.handleClick()}/>
    );
  }
}
export default Bookmark;

这是我的代码。我已经绑定了这个函数，但它仍然在渲染时被调用。这也是他们在 React 文档中的做法：https://facebook.github.io/react/docs/handling-events.html

只有当我这样做时它才有效：

<div className='bookmark' onClick={() => this.handleClick()}/>

只有当我点击按钮时才会调用handleClick。

Answer 1

因为您传递的是方法调用而不是方法本身。

改成

<div className='bookmark' onClick={this.handleClick}/>