javascript - 子父组件 react (共享)

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