将数据发送到一个间接的孩子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事件

回答

相关问题