Question

我遇到将道具传递给子元素的问题。我有一个父母让孩子（四次）有按钮。我想执行“console.log（id）;”每次我点击按钮。但问题是onClick即使我没有点击按钮也会被执行。所以在控制台中，我可以看到它一次性打印出来。这是我的代码。 tagsBrief_array是一个json对象数组。

父组件

#menu {float: left}

子组件

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>
        );
    }
}

Answer 1

<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来查看日志的原因，而handleClick又调用了父母onClick = { () => this.props.onclick(this.props.id)}。

您可以将其更改为ufunc

Answer 2

WitVault是正确的。您传递的是函数的结果而不是函数本身。

此外，如果您有很多要传递的道具，您可以使用子组件上的spread运算符传递所有道具：

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

将道具传给孩子的麻烦

2 个答案: