limweb · July 23, 2015 05:50
diff --git a/ReactJsCommunicate b/ReactJsCommunicate
 <!DOCTYPE html>
 <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title></title>
    <script src="https://code.jquery.com/jquery-1.11.3.min.js" type="text/javascript"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.13.3/react.min.js" type="text/javascript"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.13.3/JSXTransformer.js" type="text/javascript" ></script>
 </head>
 <body>
    <div id="content"  />
 </body>

 <script type="text/jsx">

 var Childbtn = React.createClass({
    childfunction:function(){
      // this function is  test call from parent 
      alert(' click function at childcomponent');
    },

    handleClick:function(){
      // test call parenet function 
      this.props.parent.handleClick();
    },
    id:'childid',
    render: function() {
           return (
             <input type="button" value="ClickMe"  onClick={this.handleClick} ></input>
            );
       }
 });

 var ParentBtn = React.createClass({

  getInitialState: function() {
    return {liked: false};
  },

  handleClick: function(event) {
    console.log('click me at parent comonent ');
    console.log(event);
    console.log(this.refs.child.id); // test refreenct id  from  child component  = childid;
    this.refs.child.childfunction(); // test calll function  of child component is childfunction
    this.setState({liked: !this.state.liked});
    // alert('Hello');
  },
  render: function() {
    var text = this.state.liked ? 'like' : 'haven\'t liked';
    return (
      <div>
      <p ref="pp" onClick={this.handleClick} >   You {text} this. Click to toggle.  </p>  {/* sample html element */}
      <Childbtn  parent = {this}  ref='child' /> {/* child component  */}
      </div>
    );
  }
 });


 React.render(<ParentBtn />,document.getElementById('content'));
 </script>
 </html>
	<!DOCTYPE html>
	<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<title></title>
	<script src="https://code.jquery.com/jquery-1.11.3.min.js" type="text/javascript"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.13.3/react.min.js" type="text/javascript"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.13.3/JSXTransformer.js" type="text/javascript" ></script>
	</head>
	<body>
	<div id="content" />
	</body>

	<script type="text/jsx">

	var Childbtn = React.createClass({
	childfunction:function(){
	// this function is test call from parent
	alert(' click function at childcomponent');
	},

	handleClick:function(){
	// test call parenet function
	this.props.parent.handleClick();
	},
	id:'childid',
	render: function() {
	return (
	<input type="button" value="ClickMe" onClick={this.handleClick} ></input>
	);
	}
	});

	var ParentBtn = React.createClass({

	getInitialState: function() {
	return {liked: false};
	},

	handleClick: function(event) {
	console.log('click me at parent comonent ');
	console.log(event);
	console.log(this.refs.child.id); // test refreenct id from child component = childid;
	this.refs.child.childfunction(); // test calll function of child component is childfunction
	this.setState({liked: !this.state.liked});
	// alert('Hello');
	},
	render: function() {
	var text = this.state.liked ? 'like' : 'haven\'t liked';
	return (
	<div>
	<p ref="pp" onClick={this.handleClick} > You {text} this. Click to toggle. </p> {/* sample html element */}
	<Childbtn parent = {this} ref='child' /> {/* child component */}
	</div>
	);
	}
	});


	React.render(<ParentBtn />,document.getElementById('content'));
	</script>
	</html>