為什么在渲染上調用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}/>