反应 onClick 功能未触发

【问题标题】：React onClick function not firing反应 onClick 功能未触发
【发布时间】：2018-02-18 09:35:13
【问题描述】：

我有一个包含多个 Post 组件的 React 组件。我在每个 Post 组件上都有 onClick 属性，应该触发一个简单的 console.log。我不知道为什么它不开火。这是代码。

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>
    );
  }
}

【问题讨论】：

将您的 Post 组件的代码添加到您的问题中。

标签： reactjs

【解决方案1】：

您不能将onClick 或任何其他事件绑定到组件。您应该将其绑定到 DOM 元素。

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

相反，

以这种方式定义Post，因此它接受eventHanlder作为道具并将其附加到Post DOM元素。

帖子组件：

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

将handleClick 传递给 Post 组件：

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

【讨论】：