javascript - 将 Prop 传递给 child 的麻烦

Question

我在将 Prop 传递给子元素时遇到问题。我有一个让 child (四次)有按钮的 parent 。我想执行“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>
    );
}
}

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