javascript - child-parent components react (sharing) -
i have link in particular component...
class bottom extends react.component { constructor(){ super(); this.state = {link:"don't have 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; i added onclick event handler on link above. now, want parent component uses component above, bottom, catch onclick event.
so in following component, want following...
import bottom './register-link.js'; class index extends react.component { constructor() { super(); this.state = {header:"welcome tutorhub"} } if clicked: console.log("link clicked"); render(){ return ( <div> <inputs /> <bottom /> </div> </div> ); } } export default index; how can achieve this?
according official documentation of react js can pass functions , values props parent children component. pass function props named onclick bottom component index component. be
<bottom onclick={this.handleclick.bind(this)}/> instead of
<bottom /> the full code given bellow:
class bottom extends react.component { constructor(){ super(); this.state = {link:"don't have 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 './register-link.js'; class index extends react.component { constructor() { super(); this.state = {header:"welcome tutorhub"} this.handleclick = this.handleclick.bind(this); } handleclick() { console.log("link clicked"); } render(){ return ( <div> <inputs /> <bottom onclick={this.handleclick.bind(this)}/> </div> </div> ); } } export default index;
Comments
Post a Comment