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

时间:2017-03-05 01:38:56

标签: javascript reactjs onclick parent-child parent

我正在使用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>;
}

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

1 个答案:

答案 0 :(得分:2)

我认为也许你在想它 - 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>;
}