Skip welcome & menu and move to editor
Welcome to JS Bin
Load cached copy from
 
<!doctype html>                                                 
<html>                                                          
  <body>
    <label>Synchronous Input:</label>
    <div id="sync-container"></div>
    <br><br>
    <label>Asynchronous Input:</label>
    <div id="async-container"></div>                                  
                                                                
    <script src="http://fb.me/react-0.12.2.js"></script>                                                                              
  </body>                                                       
</html>                                                         
 
var synchronouslyUpdatingComponent =
    React.createFactory(React.createClass({
        getInitialState: function () {
            return {value: "Hello"};
        },
        changeHandler: function (e) {
            this.setState({value: e.target.value});
        },
        render: function () {
            var valueToSet = this.state.value;
            console.log("Rendering...");
            console.log("Setting value:" + valueToSet);
            if(this.isMounted()) {
                console.log("Current value:" + this.getDOMNode().value);
            }
            return React.DOM.input({value: valueToSet,
                                    onChange: this.changeHandler});
        }
    }));
var asynchronouslyUpdatingComponent =
    React.createFactory(React.createClass({
        getInitialState: function () {
            return {value: "Hello"};
        },
        changeHandler: function (e) {
            var component = this;
            var value = e.target.value;
            window.setTimeout(function() {
                component.setState({value: value});
            });
        },
        render: function () {
            var valueToSet = this.state.value;
            console.log("Rendering...");
            console.log("Setting value:" + valueToSet);
            if(this.isMounted()) {
                console.log("Current value:" + this.getDOMNode().value);
            }
            return React.DOM.input({value: valueToSet,
                                    onChange: this.changeHandler});
        }
    }));
React.render(synchronouslyUpdatingComponent(),
             document.getElementById('sync-container'));
React.render(asynchronouslyUpdatingComponent(),
             document.getElementById('async-container'));
Output

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

Dismiss x
public
Bin info
anonymouspro
0viewers