最好的方法来处理输入字段的变化怪异的形式

Question

我正在开发一个Web应用程序，有一个表单有太多的输入字段（约20），每一个变化都必须保存（我认为使用Socket.IO来通知我的后端实时保存所有更改），但处理多个onChange事件看起来不太清楚。我很想知道是否有人有类似的问题，以及如何使用更好的方法来解决问题。

Answer 1

您可以附加onChange事件到form而不是对事件冒泡：

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

演示：https://jsfiddle.net/j178m3zL/

Answer 2

您确定要在每次更改时向服务器发送更改吗？这是很多流量（实际上，很多连接），我相信你不想拥有这些流量。提交您的更改onBlur甚至onSubmit。这导致更好的表现！

Answer 3

所以你想要控制的表单字段。

看看https://facebook.github.io/react/docs/forms.html。

我会做下面的事情。

https://jsbin.com/bidiwob/edit?js,output