React和Multiple表单字段 [英] React and Multiple form fields

问题描述

我正在阅读有关onChange的文档，我很好奇是什么如果我的论坛有多个字段，如选择框，复选框，文本区域和输入，我会这样做吗？我只是做了类似的事情：

I was reading documentation on "onChange" and I am curious as to what I would do if my forum has multiple fields like select boxes, checkboxes, text areas and inputs? Do I just do something like:

 getInitialState: function() {
    return {textArea: 'Hello!', input: 'World', ...};
  },

到初始状态，然后用于处理该更改的相同概念字段？

to the initial state and then the same concept for handling that change of that field?

推荐答案

编辑：回想起来，这个答案非常糟糕，使用 Junle Li 而是回答。

In retrospect, this answer is pretty bad, use Junle Li's answer instead.

是的，你可以做到这一点。但是当你得到很多表单组件时，编写所有处理程序和getInitialState调用都会非常冗长，那么mixin怎么样？

Yes you can do exactly that. When you get a lot of form components, though, it can be quite verbose to write all of the handlers and the getInitialState calls, so how about a mixin?

jsbin

^{注意还要查看react的值linkLink mixin}

让我们看看我们的视图将如何通过示例登录表单来查看。你可以调用 this.getFormData（）来获取一个只有你的表单状态的对象，允许你在状态中存储其他值。

Let's take a look at how our view will look with an example sign in form. You can call this.getFormData() to get an object with just your form state, allowing you to store other values in state as well.

// create a mixin for our form
var formMixin = makeFormMixin([
    "username",
    "password"
]);

var App = React.createClass({
  mixins: [formMixin],
  render: function(){
    return (
      <div>
        <form>
          Username: <input 
                value={this.state.username} 
                onChange={this.handleUsernameChange} />

          Password: <input type="password"
                value={this.state.password} 
                onChange={this.handlePasswordChange} />
        </form>
      </div>
    );
  }
});

此函数采用一组字段名称，并设置初始状态，并为您提供处理函数。然后，您可以选择使用这些函数，或者为特殊情况创建自己的处理函数。

This function takes an array of field names, and sets the initial state, and provides handler functions for you. You can then choose to use these, or create your own handler functions for special cases.

function makeFormMixin(fields){
  var mixin = {
    getInitialState: function(){
      var state = {};
      fields.forEach(function(field){

        state[field] = this.props[field] || "";
      }, this);
      return state;
    },
    getFormData: function(){
      var data = {};
      fields.forEach(function(field){
        data[field] = this.state[field];
      }, this);
      console.log(data);
      return data;
    }
  };

  fields.forEach(function(field){
    var method = camelJoin(["handle", field, "change"]);
    mixin[method] = function(event){
      var update = {};
      update[field] = event.target.value;
      this.setState(update);
    }
  });

  return mixin;
}

// helper function ["Makes", "things", "camel", "case"] => "makesThingsCamelCase"
function camelJoin(parts){
  return parts.map(function(part, i){
    if (i === 0) {
      return part[0].toLowerCase() + part.slice(1);
    }
    else {
      return part[0].toUpperCase() + part.slice(1);
    }
  }).join("");
}

这篇关于React和Multiple表单字段的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！