把道具傳給小孩的麻煩

我有把道具傳給子元素的問題。我有一個父母讓孩子（四次）有按鈕。我想執行「console.log（id）;」每次我點擊按鈕。但即使我不點擊按鈕，onClick也會被執行。所以在控制檯中，我可以看到它一次打印出來。這是我的代碼。 tagsBrief_array是一個json對象數組。把道具傳給小孩的麻煩

父組件

export default class TagsBrief extends Component{ 
    handleClick(id){ 

     console.log(id); 
    } 
    render() { 
     var populate = tagsBrief_array.map((value)=> { 
      return(
       <TagBriefItem id={value.id} onclick={this.handleClick} description={value.tag_name} percent={value.tag_percent}/>) 
     }); 
     return (
      <MuiThemeProvider> 
       <div className="tagsBrief"> 
        {populate} 
       </div> 
      </MuiThemeProvider> 
     ); 
    } 
}

子組件

export default class TagsBriefItem extends Component { 

render() { 
    return (
     <MuiThemeProvider> 
      <button onClick={this.props.onclick(this.props.id)} style={{backgroundColor: "#293C8E"}} className="tagsBriefItem"> 
       <h2 style={styles.headline}>{this.props.description}</h2> 
       <h3 style={styles.headline}>{this.props.percent}</h3> 
      </button> 
     </MuiThemeProvider> 
    ); 
} 
}

來源

2016-11-10 ApurvG

<button onClick={this.props.onclick(this.props.id)} style={{backgroundColor: "#293C8E"}} className="tagsBriefItem"> 
    <h2 style={styles.headline}>{this.props.description}</h2> 
    <h3 style={styles.headline}>{this.props.percent}</h3> 
</button>

這裏要傳遞的onClick結果撐起不是一個函數。這就是爲什麼你看到由於電話號碼爲onClick而看到的日誌，這些電話輪流呼叫父母的。

您可以更改到onClick = {() => this.props.onclick(this.props.id)}

來源

2016-11-10 09:26:23 WitVault

WitVault是正確的。你傳遞的是函數的結果而不是函數本身。

<ChildComponent {...this.props} />

：

另外，如果你有很多的道具來傳遞下來，你可以通過使用傳播運營商的子組件上通過所有的道具

來源

2016-11-10 18:47:30

把道具傳給小孩的麻煩

回答

相關問題