React communication linkage between independent components

React is now the mainstream efficient front-end framework, and its official document, Http://reactjs.cn/react/docs/getting-started.html, describes the communication between components, only the method of communication between parent and child components, There is no solution for the communication between independent components. Here I introduce a good way to implement--signals.

The first step is to create two simple react components-a progress bar and an input box. Component--progress bar:

var processbar=react.createclass ({           getinitialstate:function () {                return {                    initvalue:0,//initial value                    endvalue:0,  //FINAL value                    totalvalue:100,//value                   }            ,},            render:function () {                var barstyle={                    width : This.getper (),                };                Return (                     <div classname= "Progress" >                         <div classname= "Progress-bar" style={barstyle}>{ This.getper ()}</div>                                                 </div>                    );              }         );

The implementation of this progress bar depends on the bootstrp of the progress bar component style and effects, you can shift: http://v3.bootcss.com/components/#progress view.

Component--input Box:

  var input=react.createclass ({                       getendvalue:function () {                    var curvalue=this.refs.endvalue.value;                    if (curvalue <= 0) curvalue=0;                    if (Curvalue >=100) curvalue=100;                   },            render:function () {                                return (                     <div>                         <input type= "Text"  ref= "endvalue" placeholder= "Please enter the value" onchange={this.getendvalue}/>                     </div>                    );}             );

Two separate, simple components have been completed, so let's see how they can be closely linked, and the progress bar can change in real time when the value in the input box changes.

Here, you can learn from another blog about several strategies for resolving communication between independent components--HTTP://WWW.TUICOOL.COM/ARTICLES/AZQZEBQ.

Here, I mainly introduce the solution of signals. Let's look briefly at signals's GitHub introduction: http://millermedeiros.github.io/js-signals/, look at the basic examples of applications that it gives:

Custom object that dispatch a ' started ' signalvar myObject = {  started:new signals. Signal ()};function onstarted (param1, param2) {  alert (param1 + param2);} MyObject.started.dispatch (' foo ', ' Bar '); Dispatch signal Passing custom parameters

MyObject.started.add (onstarted); Add Listener

MyObject.started.remove (onstarted); Remove a single listener

We will find that the signals application is simple and the steps are:

1: Create a signals first. The instance object of the signal.

2: The object publishes data through the Dispatch () method.

3: The instance object provides the Add (function (data) {}) method to listen to the data, and data by default is published.

4: You can close the connection via remove () if necessary.

To mention here, because the release and monitoring can only build one, so our data can be centralized into a data object, so that the data can be transferred in large quantities.

      OK, now let's apply it to our components to see if we can solve our problem.    

<! DOCTYPE html>
Our code effect is as follows:
Our problem has been solved!
If the above content is helpful to you, please help me to order a recommendation, spread the knowledge, beneficial to you and me.
React communication linkage between independent components