Eltern-Kind-Komponenten reagieren (Sharing)

Question

ich einen Link in einer bestimmten Komponente haben ...

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; 

Ich habe oben ein onClick Event-Handler auf den Link. Jetzt möchte ich die übergeordnete Komponente, die die obige Komponente Bottom verwendet, um das onClick-Ereignis abzufangen.

So in der folgenden Komponente, möchte ich folgendes ...

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; 

Wie kann ich das erreichen?

Answer 1

Laut der offiziellen Dokumentation von react js können Sie Funktionen und Werte als Requisiten von Eltern zu Kinder-Komponente übergeben. Übergeben Sie einfach eine Funktion als Requisiten mit dem Namen onClick an die Bottom-Komponente aus der Index-Komponente. Es wird

<Bottom onClick={this.handleClick.bind(this)}/> 

statt

<Bottom /> 

Der vollständige Code ist unten angegeben:

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;