React Form 指南

简念@蚂蚁金服another.nianj@gmail.com

回归 — Form 的本质需求

用户输入信息（表单项）
处理用户输入的信息
- 验证
- 响应
- 持久化

回顾 - 前 React 时代的 Form

基于 DOM 操作，做复杂的表单会比较麻烦，要写很多代码，且难以维护

以 jquery.validation.js 为例

$.validator.setDefaults({
    submitHandler: function() {
      alert("提交事件!");
    }
});

$().ready(function() {
    $("#commentForm").validate();
});

在 form 元素上挂载事件处理器，托管所有 form 元素下的表单项事件
在表单 submit 时或表单项发生 focusin/focusout、keyup 等事件时，获取表单项的值，然后执行 rule 函数。
更新 DOM，显示错误信息

$( this.currentForm ).on( 
    "focusin.validate focusout.validate keyup.validate",
    ":text, [type='password'], [type='file'], " +
    "... ", delegate )

$("#orderform").
    validateDelegate("input.quantity", "keyup", function(event) {
	var totals = 0;
	$("#orderitems input.quantity").each(function() {
		totals += +this.value;
	});
	$("#totals").attr("value", totals).valid();
    });

问题

定制化比较困难，就需要对这些代码很熟悉，而且可能会写很多代码。

现在 - React 的 Form

基于 Virtual DOM 和 Component

sample react form demo

创建一个简单的业务 Form 组件，用于控制表单项元素，收集表单项元素的值，同时也可用于处于你自己的业务逻辑，如 validate 或者 submit 等。

问题：

没有双向绑定？要写很多代码诶。。。
所有的验证逻辑都得自己写？要写很多代码诶。。

class SampleForm extends React.Component {
  constructor(props) {
    super(props);
    this.state = {value: ''};

    this.handleChange = this.handleChange.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
  }

  handleChange(event) {
    this.setState({value: event.target.value});
    // Do some additional validation here...
  }

  handleSubmit(event) {
    alert('A name was submitted: ' + this.state.value);
    event.preventDefault();
    //Do your customized submit here...
  }

  render() {
    return (
      <form onSubmit={this.handleSubmit}>
        <label>
          Name:
          <input type="text" value={this.state.value} onChange={this.handleChange} />
        </label>
        <input type="submit" value="Submit" />
      </form>
    );
  }
}