Best approach to handle input fields' change in a monstrous form

Question

I am developing a web application, there is a form with too many input fields (about 20) where every change must be saved (I thought to use Socket.IO to notify my backend to persist all changes in real time) but handle mutiple onChange events looks so unclear. I would love to know if someone have some similar problem and how it could be done using a better approach.

Answer 1

You can attach the onChange event to the form instead for event bubbling:

var Hello = React.createClass({
  onChange: function(e) {
    console.log(e.target.value);
  },
  render: function() {
    return <form onChange={this.onChange}><input /><input /></form>;
  }
});

Demo: https://jsfiddle.net/j178m3zL/