Javascript 通信子级父级

我正在学习react js，现在我遇到了一个我不知道如何解决的问题，也许你们中的一些人可以帮我解决

在我的Web应用程序中，我有一个react组件，它表示选择语言的下拉列表，如下所示：

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});
    });
}

};

---

任何帮助都将不胜感激。

您必须在

LocaleSwitcher

组件中声明句柄并将其传递给

ListItemWrapper

组件，与您传递的所选语言相同

您还可以通过道具传递事件

所以您的LocaleSwitcher组件应该如下所示

 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>);

}

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

handleClick（）{
$.get（this.props.url+”？code=“+this.props.title，函数（结果）{
/*在这里插入代码*/
});
}
render（）{
返回（
{this.props.selectedLanguage}

{
this.state.languages.map（函数（结果）{
返回（）；
})
}

）；
}

您的ListItemWrapper组件如下所示

 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>);

}

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

render（）{
日志（“标题：+this.props.title”）；
return（
）；
}

首先，将handleClick方法移动到LocaleSwitcher

然后在LocaleSwitcher中的渲染方法中执行以下操作：

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>);
}

render（）{
返回（
{this.props.selectedLanguage}

{
this.state.languages.map（函数（result，i）{
返回（）；
})
}

）；
}

注意bind和map函数中的“i”变量

那么您的ListItemWrapper应该如下所示：

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>);
}

类ListItemWrapper扩展了React.Component{
建造师（道具）{
超级（道具）；
this.render=this.render.bind（this）；
}
渲染（）{
日志（“标题：+this.props.title”）；
return（
）；
}

官方文件中有一篇关于这方面的小文章：