Question

我有一个包含多个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>
    );
  }
}

Answer 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}/>

React onClick函数没有触发

1 个答案: