React怎么收集整个form表单的值?

#1

除了用refs一个一个写以外,有没有方便一点的办法

#2

使用redux-form,不过他最近快要release新版本了,API有巨大变化,可以关注一下新版本,等release了再用

#3

推荐使用受控表单,给表单元素 input 等添加 onChange 事件,更改对应的 state,这个过程可以添加数据验证。

推荐阅读:
表单组件 注:这篇文章将原文的 Controlled Components 翻译为受限组件,我认为翻译为受控组件更合适一些。
Or
Forms

#4

刚写了一点React UI Form设计的文字,可以参考下:) React-UI 0.6 Form设计

#5

form.js

var React = require('react');
var ReactDOM = require('react-dom');

var {Form, Input} = require('react-form');
var {Password, Text} = require('react-form-inputs');

var LoginForm = React.createClass({
  render() {
    return (
<div>
      <Form {...this.props} for="user">
        <h1>Login</h1>
        <Input type={Text} for="username" placeholder="Username" />
        <Input type={Password} for="password" placeholder="Password" />
        <input type="submit" value="Login" />
      </Form>
</div>
    );
  }
});

var user = {
  username: null,
  password: null
};

ReactDOM.render(<LoginForm object={user} />, document.getElementById('example'));

browserify -t browserify-jsx form.js
Error: Parsing file form.js: Unexpected token (10:0)
这个写法怎么转换?

#6

那也需要每个input都要调用onChange啊,然后提交整个state?