把道具传给小孩的麻烦

我有把道具传给子元素的问题。我有一个父母让孩子（四次）有按钮。我想执行“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

把道具传给小孩的麻烦

回答

相关问题