父子組分反應的（共享）

Question

我在一個特定的成分的鏈接...

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; 

我怎樣才能做到這一點？

Answer 1

根據react js的官方文檔，您可以將函數和值作爲道具從父項傳遞給兒童組件。只需將一個名爲onClick的道具的功能傳遞給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;