我正在使用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>;
}
如何将两者结合使用以同时访问父道具和子道具?
答案 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>;
}