交流儿童父母的ReactJs

Question

I'm learning react js and now I have a situation that I don't know how to resolve and maybe some of you could help me out.

In my webapplication I have a react component that represents a dropdown to select the language, as follows:

class LocaleSwitcher extends React.Component{


constructor() {
    super();
    this.render = this.render.bind(this);
    this.componentDidMount=this.componentDidMount.bind(this);
    this.state = { languages:[] };
}


render(){


    return (<li>{this.props.selectedLanguage}
        <ul className="dropdown">
            {
                this.state.languages.map(function(result){

                    return (<ListItemWrapper key={result.id}  title={result.text} url="language" />);
                })

            }
        </ul>
    </li>);

}

componentDidMount(){
    var component = this;
    $.get('data/languages',function(result){
        component.setState({languages: result});
    });
}

};

As you can see I'm displaying the selectedLanguage (by default "english") using props : {this.props.selectedLanguage}

For the li elements I have created another component ListItemWrapper, and the communication parent-child I'm doing it via props:

class ListItemWrapper extends React.Component{

constructor() {
super();
this.render = this.render.bind(this);
this.handleClick =this.handleClick .bind(this);
}


 render () {
    console.log("title:" + this.props.title);
    return (<li onClick={this.handleClick}><a href="#">{this.props.title}</a></li>);
}

handleClick () {
    $.get(this.props.url+"?code="+this.props.title,function(result){


/*Insert the code here */

    });
}
};

My problem now is that I don't know how to do the communication from child to parent, as once the user selects a language I would like to update the dropdown with the selected language, so what I need is to fill the method handleClick to send to the parent component the selected language and update it, but I don't know how to do it. So far I have tried that with no luck

handleClick () {
    $.get(this.props.url+"?code="+this.props.title,function(result){

this.props.selectedLanguage=this.props.title;

});
}
};

Any help will be very appreciated.

Answer 1

you have to declare the handle click in your LocaleSwitcher component and pass it to the ListItemWrapper component same like the selected language you have passed.

you can also pass the events in props.

so your LocaleSwitcher component should look like

 handleClick () {
    $.get(this.props.url+"?code="+this.props.title,function(result){


/*Insert the code here */

    });
}
    render(){


    return (<li>{this.props.selectedLanguage}
        <ul className="dropdown">
            {
                this.state.languages.map(function(result){

                    return (<ListItemWrapper key={result.id}  title={result.text} url="language" handleClick={this.handleClick}/>);
                })

            }
        </ul>
    </li>);

}

and your ListItemWrapper component look like

     render () {
    console.log("title:" + this.props.title);
    return (<li onClick={this.props.handleClick}><a href="#">{this.props.title}</a></li>);
}

Answer 2

First of, move your handleClick method to LocaleSwitcher.

Then in your render method in LocaleSwitcher do:

render(){
    return (<li>{this.props.selectedLanguage}
        <ul className="dropdown">
            {
                this.state.languages.map(function(result,i){

                    return (<ListItemWrapper key={result.id}  title={result.text} onclick={this.handleClick.bind(this,i)} url="language" />);
                })

            }
        </ul>
    </li>);
}

Notice the bind, and the "i" variable in the map function.

Then your ListItemWrapper should look like this:

class ListItemWrapper extends React.Component{

constructor(props) {
super(props);
this.render = this.render.bind(this);
}


 render () {
    console.log("title:" + this.props.title);
    return (<li onClick={this.props.handleClick}><a href="#">{this.props.title}</a></li>);
}

The official docs has a little article about this:

https://facebook.github.io/react/tips/communicate-between-components.html