Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="//fb.me/react-0.13.1.js"></script>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
  <div id="container" ></div>
  <div >Document clicked at: <span id="docClickTime">not clicked yet</span></div>
</body>
</html>
 
var Grandpa = React.createClass({
    
    getInitialState: function() {
        return {clickTime: '-'};
    },
    
    onClick: function(event) {
            console.log('React: grandpa is clicked');
        this.setState({clickTime: (new Date().getTime())});
    },
    
    render: function() {
         return <div id="grandpa" onClick={this.onClick}>
             <Dad  />
             <p>Grandpa Clicked At: {this.state.clickTime}</p>
         </div>;
    }
});
​
var Dad = React.createClass({
​
    getInitialState: function() {
        return {clickTime: '-'};
    },
    
    onClick: function(event) {
            console.log('React: dad is clicked');
        this.setState({clickTime: (new Date().getTime())});
    },
    
    render: function() {
        return  <div id="dad" onClick={this.onClick}>
            <Son />
            <p>Dad Clicked At: {this.state.clickTime} AND STOP event propagation</p>
          </div>;
    }
});
​
​
var Son = React.createClass({
    getInitialState: function() {
        return {clickTime: '-'};
    },
    
    onClick: function(event) {
        console.log('React: son is clicked');
        this.setState({clickTime: (new Date().getTime())});
    },
    
    render: function() {
        return <div>
          <button id="son" onClick={this.onClick}>Click me</button>
          <p>Son Clicked At: {this.state.clickTime}</p>
        </div>;
    }
 
});
​
​
React.render(<Grandpa/>, document.getElementById('container'));
​
$('#son').on('click', function(event){
    console.log('native event: son is clicked');
});
​
$('#dad').on('click', function(event){
    console.log('native event: dad is clicked');
    event.stopPropagation();
});
​
$('#grandpa').on('click', function(event){
    console.log('native event: grandpa is clicked');
});
​
$(document).on('click', function(){
    console.log('doc is clicked');
    $('#docClickTime').text(new Date().getTime());
});
Output 300px

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
anonymouspro
0viewers