子级父级组件会做出反应（共享）

debugcn 发表于 Dev

Buydadip

我在特定组件中有一个链接...

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的官方文档，您可以将函数和值作为props从父级传递到子级组件。只需将一个名为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;

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。