Best Practice For Reading Form Data in React

First, jQuery is an unnecessary dependency and it's not the cleanest option so let's rule it out.

Next, refs have issues with flexibility. See this answer for details. Let's rule refs out for all but the simplest cases.

That leaves option #2 - what Facebook calls controlled components. Controlled components are great because they cover all use cases (like validation on keyup). Although it's not much code, if you'd rather not add a simple change handler for each form element, you might use one change handler for all elements with the use of bind. Something like this:

handleChange: function(fieldName, e) {
  console.log("field name", fieldName);
  console.log("field value", e.target.value);
  // Set state or use external state.
},

render: function() {
  var someValue = this.state.someValue; // Or a prop is using external state
  return (
    <div>
      <input 
        name="someName" 
        value={someValue} 
        onChange={this.handleChange.bind(this, "someName")} />
    </div>
  )
}

Or for an even cleaner way, see this answer.

Tags:

Reactjs