我在特定组件中有一个链接...
class Bottom extends React.Component {
constructor(){
super();
this.state = {link:"Don't have an account?"}
}
render(){
return (
<div>
<div className="sub-login">
<p>{this.state.link}<a onClick={this.props.onClick.bind(null, this)}> Register here</a></p>
</div>
</div>
);
}
}
export default Bottom;
我在上面的链接上添加了一个 onClick 事件处理程序。现在,我希望使用上面组件的父组件 Bottom
捕获 onClick 事件。
所以在下面的组件中,我想要以下...
import Bottom from './register-link.js';
class Index extends React.Component {
constructor() {
super();
this.state = {header:"Welcome to TutorHub"}
}
IF CLICKED: console.log("link was clicked");
render(){
return (
<div>
<Inputs />
<Bottom />
</div>
</div>
);
}
}
export default Index;
我怎样才能实现这个目标?
最佳答案
根据react js的官方文档,您可以将函数和值作为 Prop 从父组件传递给子组件。只需将名为 onClick 的函数作为 props 从 Index 组件传递到 Bottom 组件即可。将会是
<Bottom onClick={this.handleClick.bind(this)}/>
而不是
<Bottom />
完整代码如下:
class Bottom extends React.Component {
constructor(){
super();
this.state = {link:"Don't have an account?"}
}
render(){
return (
<div>
<div className="sub-login">
<p>{this.state.link}<a onClick={this.props.onClick.bind(this)}> Register here</a></p>
</div>
</div>
);
}
}
export default Bottom;
import Bottom from './register-link.js';
class Index extends React.Component {
constructor() {
super();
this.state = {header:"Welcome to TutorHub"}
this.handleClick = this.handleClick.bind(this);
}
handleClick()
{
console.log("link was clicked");
}
render(){
return (
<div>
<Inputs />
<Bottom onClick={this.handleClick.bind(this)}/>
</div>
</div>
);
}
}
export default Index;
关于javascript - 子父组件 react (共享),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39114028/