controlled_input.js

"use strict";

var ControlledInput = (function() {
  var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };

  return React.createClass({
    displayName: "ControlledInput",
  
    getInitialState: function getInitialState() {
      return { value: this.props.value };
    },
  
    componentWillReceiveProps: function componentWillReceiveProps(nextProps) {
      this.setState({ value: nextProps.value });
    },
  
    handleChange: function handleChange(e) {
      this.setState({ value: e.target.value });
      this.props.onChange(e.target.value);
    },
  
    render: function render() {
      return React.createElement("input", _extends({
        type: "text"
      }, this.props, {
        value: this.state.value,
        onChange: this.handleChange
      }));
    }
  });
})();