以可怕的形式处理输入字段变化的最佳方法答案

【问题标题】：Best approach to handle input fields' change in a monstrous form以可怕的形式处理输入字段变化的最佳方法
【发布时间】：2016-01-26 15:45:13
【问题描述】：

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

【问题讨论】：

标签： reactjs socket.io flux

【解决方案1】：

所以你似乎想要受控的表单字段。

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

我会做类似下面的事情。

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

【讨论】：

感谢它对我的帮助很大，我接受 David 的回答，因为我认为它是处理更改的更优雅的方式，但您的回答给了我一个很好的提示，让我加入表单的 onChange 事件。

【解决方案2】：

您可以将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/

【讨论】：

这绝对是最干净的方法，谢谢:)

【解决方案3】：

您确定要在每次更改时将更改发送到服务器吗？这是大量的流量（实际上是大量的连接），我确定您不想拥有。提交您的更改onBlur 甚至onSubmit。这会带来更好的性能！

【讨论】：

如果只是文本输入字段的话，流量不会很多。
对，可能不是很多流量，而是很多（不必要的）连接！