反应onClick功能不触发

Question

I have a React component that houses several Post components. I have onClick attributes on every Post component which should fire a simple console.log. I have no idea why it is not firing. Here is the code.

class Feed extends Component {
    constructor(){
    super();
    this.handleClick = this.handleClick.bind(this);
    }

  handleClick(){
    console.log('hello');
  }

  render(){
    return(
      <div className='feed_container'>
        <h2 className='feed_header_text'>Followed Posts <i className="fa fa-address-book" aria-hidden="true"></i></h2>
        <Post name='Bruce Banner' onClick={this.handleClick}/>
        <Post name='Peter Parker' onClick={this.handleClick}/>
        <Post name='Bruce Wayne' onClick={this.handleClick}/>
        <Post name='Harleen Frances Quinzel' onClick={this.handleClick}/>
        <Post name='Alan Scott' onClick={this.handleClick}/>
        <Post name='Tony Stark' onClick={this.handleClick}/>
        <Post name='Clark Kent' onClick={this.handleClick}/>
        <Post name='Barry Allen' onClick={this.handleClick}/>
      </div>
    );
  }
}

Answer 1

You can not bind the onClick or any other event to component.You should bind it to DOM element.

<Post name='Bruce Banner' onClick={this.handleClick}/> //wrong

instead,

define the Post in such way,so it accept eventHanlder as props and attach it to Post DOM element.

Post component :

const Post = ({handleClick})=>(<div onClick={handleClick}>Hello</div>)

passed handleClick to Post component :

<Post name='Bruce Banner' handleClick={this.handleClick}/>