React - 单击子组件上的处理程序，地图不起作用

Question

我有 3 个反应组件 - 一个容器 (SearchBarContainer) 和 2 个展示组件（PostList 和 PostItem（PostList 的子项））

我正在尝试将点击处理程序附加到将冒泡到 SearchBarContainer 的帖子项目，这是我的代码：

class SearchBarContainer extends Component {

  selectPost(post) {
    console.log('cliked');
    //this.props.dispatch(selectPost(post));
  }

  render() {

    return (

        <div>
          <div className="center-xs">
            <p>To get started, type in some keywords below</p>
          </div>

          <SearchBar onTermChange={this.props.actions.loadPosts} onNull={this.props.actions.nullPosts}/>  
          <PostList posts={this.props.posts} isFetching={this.props.isFetching} onClick={this.selectPost}/>

        </div>

    );
  }
}

这是我的帖子列表：

const PostList = (props) => {

  const postItems = props.posts.map((singlePost) => {
    return <PostItem key={singlePost.id} post={singlePost} onClick={() => props.onClick}/>
  });

  if(!props.isFetching) {
    return (
      <div className="mt2 row list-unstyled" > {postItems}</div>
    );

  } else {
    return (
      <Loader />      
    );
  }

};

export default PostList;

但是，此点击处理程序不起作用。我注意到如果我将点击处理程序放在包装 postItems 数组的 div 上，那么它确实可以工作，我认为问题是点击处理程序附加到包装在 div 内的映射项目？

这里是 PostItem 函数：

const PostItem = (singlePost) => {

  return (
      <div className="col-lg-4 col-md-12 mb2 animated fadeIn">
        <div className="card rounded">
          <div className="card-header p1">
            <h4 className="card-title mt0 h5">{singlePost.post.title}</h4>
          </div>
          <img className="card-img-top img-fluid" src={singlePost.post.thumbnail} alt={singlePost.post.title} />
          <div className="card-block p1">
            {/*<p className="card-text">{singlePost.post.description}</p>*/}
            <Link to={`/product/${singlePost.post.slug}`} className="btn btn--blue flt--left w100">View More</Link>
          </div>
        </div>

      </div>    

  )
};

export default PostItem;

我想也许我需要点击处理程序事件像这样： 点击（PostItem）->通过props传递（PostList）->通过props传递（SearchBarContainer）

Answer 1

我认为您已将 onClick 传递给组件 PostItem 行：

return <PostItem key={singlePost.id} post={singlePost} onClick={() => props.onClick}/>

您应该将它作为道具传递给 PostItem 组件并在那里处理它。就像您传递密钥和发布一样。也为 onClick 执行此操作，例如：

return <PostItem key={singlePost.id} post={singlePost} onClick={props.onClick}/>

并在 PostItem 组件中处理 onClick 属性。

Answer 2

因为您在 onClick 中使用箭头函数，而不是在此处从其主体调用 props.onClick 函数：

onClick={() => props.onClick}

使用这个把():

onClick={() => props.onClick()}

或者不使用箭头函数直接写：

onClick = {props.onClick}

更新：

无论我们在 props 中传递什么，它都只会成为一个对象属性值，我们需要在 Child 组件中使用它。

您在 PostItem 中传递 onClick 函数，但在 PostItem 中您没有在任何地方使用它，请在任何 DOM 节点上定义 click 事件，如下所示：

<div onClick={singlePost.onClick} ....>