Question

我正在使用ReactJS中的一个项目，在那里我希望父类能够将onClick事件传递给render（）函数中的一个子组件，并让onClick事件能够访问父母和孩子的道具。

我已经弄清楚如何让函数分别访问父级和子级，但不能同时访问。

对于父母，我使用：

//in parent class
clickHandler(){
    //do something with this.props.etc 
}
render(){
<myChild onClick={this.clickHandler.bind(this)}/>
}

对于我使用的孩子：

//In parent class
clickHandler(status, content, e){
    //do something with button status and content passed from child props 
}
render(){
return <myChild onClick={this.clickHandler.bind(this)}/>;
}

//in child class
render{
const { onClick } = this.props;
const { status } = this.state;
return <button onClick={(e) => onClick(status, this.props.content, e)}>click me</button>;
}

如何将两者结合使用以同时访问父道具和子道具？

Answer 1

我认为也许你在想它 - React在一天结束时只是javascript，因此，你可以这样：

// In parent class
clickHandler(status, content, e) {
    // status, content are the props passed up from the child
    console.log(status);
    console.log(content);

    // "this" still refers to parent class, so...
    // a, b, c are from the parent props 
    const { a, b, c } = this.props;

}

render(){
    return <myChild onClick={this.clickHandler.bind(this)}/>;
}

// In child class
render {
    const { onClick } = this.props;
    const { status } = this.state;
    return <button onClick={(e) => onClick(status, this.props.content, e)}>click me</button>;
}

ReactJS：赋予功能同时访问父母和子女道具？

1 个答案: