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

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

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

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

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

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

>完全绕过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&gt ;; } 这很简单,但是当我应该使用React时,我觉得我绕过了React并使用了JQuery.
>为每个表单控件提供回调：

handleFooClick：function(e){

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

render：function(){

return< form>< input name =“foo”onChange =“handleFooChange”/>< / form&gt ;; } 这似乎是React / Flux的方式,但感觉就像一堆疯狂的不必要的工作.在我的Backbone示例中,每个表单控件只需要一行,但是使用这种方法,我构建的每个最后一个控件都必须有自己的onChange处理程序(我必须在处理它时将该处理程序挂钩到每个元素). 编辑：这种方法的另一个缺点是在回调内部this.props和this.state不会指向我的表单控件的props / state(它将指向输入的props / state).这意味着我不仅要为每个输入编写一个处理程序,并在渲染时将该回调添加到每个输入,但我还必须将我的数据对象传递给每个输入！
>使用refs：

handleSubmit：function(e){

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

render：function(){

return< form>< input ref =“foo”/>< / form&gt ;; } 这似乎是一个更理智的解决方案,因为我只需要为每个表单控件添加一个“ref”属性,然后我可以在Backbone中尽可能轻松地读取数据.但是,所有React文档都表明使用refs的方式是错误的(所有使用refs的例子都涉及向控件发送信号,例如“专注于此输入”,而不是从控件中读取数据).
我觉得必须有一种“React-ive”方式来访问我的表格数据,这种表格数据并非不必要的复杂,但我没有看到它,因为我不太了解React.如果任何React专家能够解释我所缺少的东西,我将非常感激.

首先,jQuery是一个不必要的依赖,它不是最干净的选择,所以让我们排除它.

接下来,裁判有灵活性问题.有关详细信息,请参见此answer.除了最简单的情况之外,让我们的规则适用于所有人.

这留下了选项#2 – Facebook称之为controlled components.受控组件非常棒,因为它们涵盖了所有用例(如密钥上的验证).虽然代码不多,但如果您不想为每个表单元素添加简单的更改处理程序,则可以使用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>
  )
}

或者更清洁的方式,请参阅此answer.

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

相关文章