將數據發送到一個間接的孩子React.js上的click事件

我有兩個主要部分（着陸和技能）的應用程序：將數據發送到一個間接的孩子React.js上的click事件

App = React.createClass({ 
    render() { 
     return (

      <div> 
      <Landing /> 
      <Skills category={category}/> 
      </div> 

    ); 
    } 
});

在「落地」，我有一個SocialMenu組件，有項目列表（項目列表被送到SocialMenu像：<SocialMenu items={ ['Home', 'Services', 'About', 'Contact us']} />在用戶點擊，當單擊突出顯示的項目

SocialMenu = React.createClass({ 

    getInitialState: function(){ 
     return { focused: 0 }; 
    }, 

    clicked: function(index){ 
     this.setState({focused: index}); 
    }, 

     var self = this; 

     return (
      <div> 
       <ul className="testblocks">{ this.props.items.map(function(m, index){ 

        var style = ''; 

        if(self.state.focused == index){ 
         style = 'focused'; 
        } 

        return <li key={index} className={style} onClick={self.clicked.bind(self, index)}>{m}</li>; 

       }) } 

       </ul> 


       <p>Selected: {this.props.items[this.state.focused]}</p> 

      </div> 
     ); 

    } 
});

我想什麼有發生，是有指標的數據。來自SocialMenu，傳遞給技能組成部分。

但是，我不知道該怎麼做，因爲SocialMenu是Landing的孩子，而不是技能。（幾乎我想讓列表保持着陸狀態，但是將列表的點擊輸出放在技能中）。

我該怎麼做？

來源

2016-03-07 user1072337

你需要像通量有communication betweeen components that don't have parent-child relationship：沒有一個父子關係組件

對於通信兩者之間，你可以建立自己的全球盛會系統。訂閱在componentDidMount（事件），退訂 componentWillUnmount（），並調用的setState（）當您收到的事件。通量模式是安排這種情況的可能方法之一。

因此，對於您的情況，您需要有一個類似SELECT_SOCIAL的事件來傳遞索引信息，並且您的Landing組件將有一個偵聽器來接收索引信息。

來源

2016-03-07 02:14:02 Dherik

我會在哪裏放置該事件？ – user1072337

我建議閱讀[關於Flux的教程]（https://facebook.github.io/flux/docs/overview.html#content）。但是，在簡歷中：您的SocialMenu組件將調用一個執行包含索引信息的Dispatcher的Action。索引信息可以存儲在商店中。商店負責發佈帶有此事件監聽器的所有組件的索引信息的事件。 – Dherik

有沒有其他方法可以做到這一點？有沒有一種更簡單的方式將這些數據傳遞給「應用程序」，然後使用道具來傳遞技能？ – user1072337

你真的不需要Flux這個。你可能會在某個時候，但如果這是你需要做的，你爲什麼不把狀態移動到App組件，並將其發送到着陸&技能組件作爲道具。您可能還需要將clicked處理程序作爲道具傳遞給SocialMenu。

來源

2016-03-07 18:12:55 Steven

這就是我原本想要做的。鑑於此，我如何將狀態轉移到App組件？ – user1072337

將數據發送到一個間接的孩子React.js上的click事件

回答

相關問題