父子组分反应的（共享）

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;