JSFiddle - React, Tailwind, and code Playground

by spicyj

HTML

<script src="http://fb.me/react-with-addons-0.8.0.js"></script>
<div id="test"></div>

JavaScript

var TestInput = React.createClass({
    getInitialState: function() {
        return {value: this.props.value};
    },
    componentWillReceiveProps: function(newProps) {
        this.setState({value: newProps.value});
    },
    onChange: function(e) {
        this.props.onChange(e);
        this.setState({value: e.target.value});
    },
    render: function() {
        return this.transferPropsTo(
            React.DOM.input({
                value: this.state.value,
                onChange: this.onChange
            })
        );
    }
});

var InputTestComponent = React.createClass({
  render: function() {
    if(this.refs && this.refs.textField) {
      var tf   = this.refs.textField,
          node = tf.getDOMNode();
      console.log("this.props.text:", this.props.text);
      console.log("textFieldNode.value", node.value);
    }

    var self = this;
    return TestInput({
      ref: "textField",
      value: this.props.text,
      onChange: function(e) {
        var target = e.target,
            value  = e.target.value;
        
        requestAnimationFrame(function(){
          renderRoot(value);
        });
      }
    });
  }
});

function renderRoot(text) {
  React.renderComponent(
    InputTestComponent({text: text}),
    document.getElementById("test")
  );
}

renderRoot("foobar");