在React中读取表单数据的最佳实践

Question

我正在尝试在React中做一些在任何其他框架中都非常简单的事情:我想从表单中收集一堆值.

以前我用Backbone View做过这种事情,它非常简单:

readFormValues: function() {
    this.data.foo = this.$('[name="foo"]').val();
    this.data.bar = this.$('[name="bar"]:checked').val();
});

但在React中我似乎无法找到一种简单的方法.看来我唯一的选择是......

注意:格式化的道歉:代码块和列表不能很好地一起播放:-(

1. 完全绕过React并使用jQuery + e.target访问表单:

   handleSubmit: function(e) {

   var $form = $(e.target).parents('form:first');

   this.data.foo = $form.find('[name="foo"]);

   },

   render: function() {

   return <form onSubmit="handleSubmit"><input name="foo"/></form>;

   }

   这很有用,而且很简单,但是当我应该使用React时,我觉得我绕过了React并使用了JQuery.

2. 为每个表单控件提供回调:

   handleFooClick: function(e) {

   this.data.foo = event.target.value;

   },

   render: function() {

   return <form><input name="foo" onChange="handleFooChange"/></form>;

   }

   这似乎是React/Flux的方式,但感觉就像一堆疯狂的不必要的工作.在我的Backbone示例中,每个表单控件只需要一行,但是使用这种方法我构建的每个最后一个控件都必须有自己的onChange处理程序(我必须在处理它时将该处理程序挂钩到每个元素).

   编辑:这种方法的另一个缺点是在回调内部this.props并且this.state不会指向我的表单控件的props/state(它将指向输入的 props/state).这意味着我不仅要为每个输入编写一个处理程序,并在渲染时将该回调添加到每个输入,但我还必须将我的数据对象传递给每个输入!

3. 使用refs:

   handleSubmit: function(e) {

   this.state.data.foo = this.refs.foo.value;

   },

   render: function() {

   return <form><input ref="foo"/></form>;

   }

   这似乎是一个更理智的解决方案,因为我只需要为每个表单控件添加一个"ref"属性,然后我就可以在Backbone中尽可能轻松地读取数据.然而,所有React文档都表明使用refs的方式是错误的(所有使用refs的例子都涉及向控件发送信号,例如"专注于此输入",而不是从控件中读取数据).

我觉得必须有一种"React-ive"方式来访问我的表格数据,这种表格数据并非不必要的复杂,但我没有看到它,因为我不太了解React.如果任何React专家能够解释我所缺少的东西,我将非常感激.

Answer 1

首先，jQuery 是一个不必要的依赖项，而且它不是最干净的选项，所以让我们排除它。

其次，裁判的灵活性存在问题。有关详细信息，请参阅此答案。让我们排除除最简单情况之外的所有情况。

这就留下了选项#2——Facebook 称之为受控组件。受控组件很棒，因为它们涵盖了所有用例（例如 keyup 验证）。虽然代码不多，但如果您不想为每个表单元素添加一个简单的更改处理程序，则可以使用bind. 像这样的东西：

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>
  )
}

或者为了更干净的方式，请参阅此答案。