JSX on input

React exercise base

by Jacques Surveyer

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.6.1/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.6.1/react-dom.min.js"></script>
<div id="container"></div>

CSS

body {color:white; font-size:54px; background-color:yellow}

Babel + JSX

var ControlledInput = React.createClass({
  getInitialState: function() {
    return {
      value: "Hello!"
    };
  },
  
  handleChange: function(evt) {
    this.setState({
      value: evt.target.value
    });
  },
  
  reset: function() {
    this.setState({
      value: "Hello!"
    });
  },
  
  alertValue: function() {
    alert(this.state.value);
  },
  
  render: function() {
    return (
      <div>
        <input value={this.state.value} onChange={this.handleChange} />
        <button onClick={this.reset}>Reset</button>
        <button onClick={this.alertValue}>Alert Value</button>
      </div>
    );
  }
});

var UncontrolledInput = React.createClass({
  reset: function() {
    this.refs.input.getDOMNode().value = "Hello!";
  },
  
  alertValue: function() {
    alert(this.refs.input.getDOMNode().value);
  },

  render: function() {
    return (
      <div>
        <input ref="input" defaultValue="Hello!" />
        <button onClick={this.reset}>Reset</button>
        <button onClick={this.alertValue}>Alert Value</button>
      </div>
    );
  }
});

ReactDOM.render(
  <div><ControlledInput /><UncontrolledInput /></div>,
  document.getElementById('container')
);