陣營 - 單擊處理程序子組件上地圖不工作

我有3個反應部件 - 容器（SearchBarContainer）和2x表象成分（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> 

    ); 
    } 
}

這裏是我的postList：

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;

但是，這個點擊處理程序不工作。我注意到如果我將click處理程序放在包裝postItems數組的div上，那麼它確實起作用，我認爲問題在於click處理程序附加到包含在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） - >通過道具通（PostList） - >通過道具通（ SearchBarContainer）

來源

2017-08-30 rhysclay

可能重複的[React - 爲什麼事件沒有被解僱]（https://stackoverflow.com/questions/44070162/react-why-event-is-not-being-fired） –

除了它是一個重複，您需要進行@Mayank在回答中建議的更改 –

由於您使用的是帶有箭頭的onClick功能沒有要求從它身上這裏props.onClick功能：

onClick={() => props.onClick}

使用該放()：

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

或者不使用箭頭功能，直接寫：

onClick = {props.onClick}

更新：

無論我們在道具通過，它將成爲只有對象屬性值，我們需要在Child組件中使用它。

您傳遞的onClick功能PostItem但裏面PostItem你不使用它的任何地方，定義上的任何DOM節點click事件，像這樣：

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

來源

2017-08-30 12:06:12

對不起，我認爲這個問題是因爲{postItems}數組（並且單擊處理程序連接到了發佈項）呈現在組件內部期待點擊，所以它不會在事件鏈上「冒泡」。 – rhysclay

@rhysclay您在'PostItem'組件中使用onClick函數的位置？ –

對不起，我在PostItem組件內使用它（我不認爲我需要）。我將它添加到此項目中，現在它的工作方式如下：點擊（PostItem）onClick - >通過道具傳遞（PostList） - >通過道具傳遞（SearchBarContainer） – rhysclay

我想你已經通過的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 prop。

來源

2017-08-30 12:23:57

陣營 - 單擊處理程序子組件上地圖不工作

回答

相關問題