搜索
您的当前位置:首页正文

react组件之间的通讯

来源:二三娱乐
this.props.callbackParent(newState);

父组件进行对应的设置:

 onChildChanged: function (newState) { 
    this.setState({ checked: newState }); 
},

并在render加入:

<ToggleButton text="Toggle me" 
initialChecked={this.state.checked} 
callbackParent={this.onChildChanged}
 />

这里ToggleButton就是对应的子组件,看起来流程有些复杂。

//custom object that dispatch a `started` signal
var myObject = {
  started : new signals.Signal()
};
function onStarted(param1, param2){
  alert(param1 + param2);
}
myObject.started.add(onStarted); //add listener
myObject.started.dispatch('foo', 'bar'); //dispatch signal passing custom parameters
myObject.started.remove(onStarted); //remove a single listener

对于两个独立组件,使用它的思路是:

  1. 建立一个全局组件,其中引入signals所需,并让两个组件都分别引入这个全局组件:
import Signals  from  'signals';
var Global = {
         broadData: new Signals.Signal(), //全局数据广播对象
         datas : {}  //总数据对象
};
module.exports = Global;
  1. 发送方在自己的某个事件中,先设置好要传递的数据,然后调用dispatch:
 this.preValue = e.target.value ;
 Global.datas.curValue=this.preValue; //将curValue放入总数居对象
 Global.broadData.dispatch( Global.datas); //发布数据
  1. 接收方注册一个响应事件即可:
 getPer(){
                var that=this;
                console.log(Global.datas);
                Global.broadData.add(function(data){ //收听到数据
                console.log('data'+data);
                   that.setState({
                      endValue:data.curValue,
                   });
                });
                
            }   

这里需要特别注意的是,该事件注册一次就好了。我写在了constructor里,其他合适的时机下也没有问题:

 constructor(props) {
    super(props);
    this.state = {
      endValue: 0 ,
    };

   this.getPer();
  }
Top