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

Question

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

Answer 1

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

Answer 2

看来您需要受控的表单字段。

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

我会做如下的事情。

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

Answer 3

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

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

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

flux

socket.io

reactjs