React and Multiple form fields

Question

I was reading documentation on \"onChange\" and I am curious as to what I would do if my forum has multiple fields like select boxes, checkboxes, text areas and inputs? Do I

Answer 1

Edit: In retrospect, this answer is pretty bad, use Junle Li's answer instead.

---

Yes you can do exactly that. When you get a lot of form components, though, it can be quite verbose to write all of the handlers and the getInitialState calls, so how about a mixin?

jsbin

^{Note also look up react's valueLink mixin}

Let's take a look at how our view will look with an example sign in form. You can call this.getFormData() to get an object with just your form state, allowing you to store other values in state as well.

// create a mixin for our form
var formMixin = makeFormMixin([
    "username",
    "password"
]);

var App = React.createClass({
  mixins: [formMixin],
  render: function(){
    return (
      <div>
        <form>
          Username: <input 
                value={this.state.username} 
                onChange={this.handleUsernameChange} />

          Password: <input type="password"
                value={this.state.password} 
                onChange={this.handlePasswordChange} />
        </form>
      </div>
    );
  }
});

This function takes an array of field names, and sets the initial state, and provides handler functions for you. You can then choose to use these, or create your own handler functions for special cases.

function makeFormMixin(fields){
  var mixin = {
    getInitialState: function(){
      var state = {};
      fields.forEach(function(field){

        state[field] = this.props[field] || "";
      }, this);
      return state;
    },
    getFormData: function(){
      var data = {};
      fields.forEach(function(field){
        data[field] = this.state[field];
      }, this);
      console.log(data);
      return data;
    }
  };

  fields.forEach(function(field){
    var method = camelJoin(["handle", field, "change"]);
    mixin[method] = function(event){
      var update = {};
      update[field] = event.target.value;
      this.setState(update);
    }
  });

  return mixin;
}

// helper function ["Makes", "things", "camel", "case"] => "makesThingsCamelCase"
function camelJoin(parts){
  return parts.map(function(part, i){
    if (i === 0) {
      return part[0].toLowerCase() + part.slice(1);
    }
    else {
      return part[0].toUpperCase() + part.slice(1);
    }
  }).join("");
}

Answer 2

Some of my friends were discussing this today. The solution proposed by @JunleLi is great but it breaks Purerender which forces a re-render of all subcomponents every time a character it typed into one of the fields as it is regenerating the function.

Here is an example of our solution. We're still not sure if we're completely happy with it but it ultimately creates the function once and caches it.

I'd love to hear any feedback.

handleChange(key) {
    if(!this.changeHandlers) this.changeHandlers = {};
    return this.changeHandlers[key] || (this.changeHandlers[key] = event => this.setState({[key]: event.target.value}));
},

render() {
    return (
        <div>
          <input type="text" value={this.state.familyName} onChange={this.handleChange("familyName")} />
          <pre>{JSON.stringify(this.state, null, 4)}</pre>
        </div>
    );
}

Answer 3

@FakeRainBrigand 's answer is pretty cool.

I want to share one in JavaScript style (use high-order function), much shorter:

/** @jsx React.DOM */

var App = React.createClass({
  getInitialState: function () {
    return {
      username: '',
      password: ''
    }
  },
  handleChange: function (key) {
    return function (e) {
      var state = {};
      state[key] = e.target.value;
      this.setState(state);
    }.bind(this);
  },
  render: function(){
    console.log(JSON.stringify(this.getFormData(), null, 4));
    return (
      <div>
        <form>
          Username: <input 
                value={this.state.username} 
                onChange={this.handleChange('username')} />
          <br />
          Password: <input type="password"
                value={this.state.password} 
                onChange={this.handleChange('password')} />
        </form>

        <pre>{JSON.stringify(this.getFormData(), null, 4)}</pre>
      </div>
    );
  }
});

React.renderComponent(<App />, document.body);