溝通的孩子家長ReactJs

我在學習反應js，現在我有一種情況，我不知道如何解決，也許你們中的一些人可以幫助我。溝通的孩子家長ReactJs

在我的web應用我有一個表示下拉列表來選擇語言反應組件，如下所示：

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

};

正如你可以看到我顯示selectedLanguage（默認爲「英語」）使用道具：{} this.props.selectedLanguage

爲我創造了另一個組件ListItemWrapper li元素，和通信親子我通過道具做：

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; 

}); 
} 
};

任何幫助將不勝感激。

來源

2015-12-28 fgonzalez

http://stackoverflow.com/questions/35649635/communication -between-reactjs組件 –

必須聲明手柄點擊你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>); 

}

和你ListItemWrapper組件模樣

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

來源

2015-12-28 09:14:37

首先，將你的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>); 
}

通知綁定，並在地圖功能中的「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

來源

2015-12-28 09:22:32 Meeh

溝通的孩子家長ReactJs

回答

相關問題