dillon1000/react

Dynamic Input Component

Summary:
This is a proposal based loosely on the discussions I've had with @paulshen and @jwalke. It implements a shim for `React.DOM.input` (used as `<input>`) that supports two different use cases depending on whether `value` is provided or not.

If a `value` is //not// provided, the input will be initialized with the empty string (or `defaultValue`) and anytime the user changes the input, the `onChange` (or `onTextChange`) handler will be fired and the DOM will reflect the new changes.

  React.renderComponent(
    <input type="text" defaultValue="Untitled" onTextChange={handleChange} />,
    container
  );

If a `value` is provided, the input will be initialized to that value. Anytime the user changes the input, the `onChange` (or `onTextChange`) handler will be fired. However, the DOM will //not// reflect the new changes. If a `value` is provided, it is the responsibility of the owner to update the `value` prop passed in.

  var value = "Untitled";
  var input = React.renderComponent(
    <input type="text" value={value} onTextChange={handleChange} />,
    container
  );
  function handleChange(event) {
    // Do something cool like strip out non-numbers.
    var value = event.target.value.replace(/\D/g, '');
    input.setProps({value: value});
  }

This is just a start and we should build similar components for `textarea` and `select`. Also, this does not inject the new components because the changes are not backward compatible. Once we change all `<input>` uses to use `ReactDOMInput`, then we can inject.