沟通子父 ReactJs

Posted 2023-02-22

【中文标题】沟通子父 ReactJs

【英文标题】：Communication child-parent ReactJs

【发布时间】：2016-04-02 03:10:06

【问题描述】：

我正在学习 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);
    );


;

如您所见，我正在使用 props 显示 selectedLanguage（默认为“英语”）：this.props.selectedLanguage

对于 li 元素我创建了另一个组件 ListItemWrapper，通信父子我是通过 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 */

    );

;

我现在的问题是我不知道如何进行从孩子到父母的沟通，因为一旦用户选择了一种语言，我想用所选语言更新下拉列表，所以我需要填写方法 handleClick 将所选语言发送到父组件并更新它，但我不知道该怎么做。到目前为止，我已经尝试过，但没有运气

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

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

);

;

任何帮助将不胜感激。

【问题讨论】：

***.com/questions/35649635/…

【参考方案1】：

您必须在LocaleSwitcher 组件中声明句柄点击，并将其传递给ListItemWrapper 组件，就像您传递的所选语言一样。

你也可以在 props 中传递事件。

所以你的 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>);

你的 ListItemWrapper 组件看起来像

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

【参考方案2】：

首先，将您的 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>);

注意绑定，以及 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>);

官方文档有一篇关于这个的小文章：

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