Working controlled input example

Simple controlled React input. You WILL be able to edit the value. author(s): Matt Ruby

by Matt Ruby

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css">
<div id="mount" class="container" style="margin-top: 40px"></div>

<script src="https://cdn.jsdelivr.net/g/[email protected](react.min.js+react-dom.min.js),[email protected]"></script>
<script src="https://unpkg.com/[email protected]/lib/mobx.umd.min.js"></script>
<script src="https://unpkg.com/[email protected]/index.js"></script>
<script src="https://unpkg.com/mobx-react-devtools"></script>

JavaScript

var formGroupRenderer = React.createClass({
  getInitialState: function() {
    return {
      email: "test value 1"
    };
  },
  render: function() {
    return React.createElement(
      "form",
      null,
      React.createElement(
        "div",
        { className: "form-group" },
        React.createElement(
          "label",
          { htmlFor: "emailInput" },
          "Email address"
        ),
        React.createElement("input", {
          className: "form-control",
          name: "email",
          type: "email",
          id: "emailInput",
          value: this.state.emailValue,
          onChange: this.changeHandler
        })
      )
    );
  },
  changeHandler: function(event) {
    var changeObj = {};
    changeObj[event.target.name] = event.target.value;
    this.setState(changeObj);
  }
});

ReactDOM.render(
  React.createElement(formGroupRenderer),
  document.getElementById("mount")
);