举例：antd组件
antd 表单使⽤ ⽤ state 实现⽤户名密码登录 //FormPage.js import React, {Component} from "react"; import {Form, Input, Button, Icon} from "antd"; export default class FormPage extends Component { constructor(props) { super(props); this.state = { name: "", password: "" }; } submit = () => { console.log("submit", this.state); }; render() { const {name, password} = this.state; return ( <div> <h3>FormPage</h3> <Form> <Form.Item label="姓名"> <Input placeholder="please input ur name" prefix={<Icon type="user" />} value={name} onChange={e => { this.setState({name: e.target.value}); }} /> </Form.Item> <Form.Item label="密码"> <Input type="password" placeholder="please input ur password" prefix={<Icon type="lock" />} value={password} onChange={e => { this.setState({password: e.target.value}); }} /> </Form.Item> <Button type="primary" onClick= {this.submit}> 提交 </Button> </Form> </div> ); } } ⽤ Form.create() 的⽅式实现： getFieldDecorator ： ⽤于和表单进⾏双向绑定 getFieldsValue ：获取⼀组输⼊控件的值，如不传⼊参数，则获 取全部组件的值 getFieldValue ： 获取⼀个输⼊控件的值 validateFields ：校验并获取⼀组输⼊域的值与 Error ，若 fifieldNames 参数为空，则校验全部组件 import React, {Component} from "react"; import {Form, Input, Button, Icon} from "antd"; //校验规则 const nameRules = {required: true, message: "please input ur name"}; const passwordRules = {required: true, message: "please input ur password"}; @Form.create() class FormPage2 extends Component { submit = () => { const {getFieldsValue, getFieldValue,validateFields} = this.props.form; validateFields((err, values) => { if (err) { console.log("err", err); //sy-log } else { console.log("success", values); //sy-log } }); // console.log("submit", getFieldsValue(),getFieldValue("name")); }; render() { console.log("props", this.props.form); const {getFieldDecorator} = this.props.form; return ( <div> <h3>FormPage2</h3> <Form> <Form.Item label="姓名"> {getFieldDecorator("name", {rules: [nameRules]})( <Input placeholder="please input ur name" prefix={<Icon type="user" />} /> )} </Form.Item> <Form.Item label="密码"> {getFieldDecorator("password", {rules: [passwordRules]})( <Input type="password" placeholder="please input urpassword" prefix={<Icon type="lock" />} /> )} </Form.Item> <Button type="primary" onClick= {this.submit}> 提交 </Button> </Form> </div> ); } } export default FormPage2; 表单组件设计思路 表单组件要求实现 数据收集、校验、提交 等特性，可通过⾼阶组 件扩展 ⾼阶组件给表单组件传递⼀个 input 组件 包装函数 接管其输⼊事 件并统⼀管理表单数据 ⾼阶组件给表单组件传递⼀个 校验函数 使其具备数据校验功能 原理实现： 表单基本结构，创建 MyFormPage.js import React, {Component} from "react"; import kFormCreate from "../conponents/kFormCreate"; //校验规则 const nameRules = {required: true, message:"please input ur name"}; const passwordRules = {required: true, message:"please input ur password"}; export default kFormCreate( class MyFormPage extends Component { submit = () => { const {getFieldsValue, getFieldValue,validateFields} = this.props; validateFields((err, values) => { if (err) { console.log("err", err); //sy-log } else { console.log("success", values); //sylog } }); // console.log("submit", getFieldsValue(), getFieldValue("name")); //sy-log }; render() { console.log("props", this.props); //sy-log const {getFieldDecorator} = this.props; return ( <div> <h3>MyFormPage</h3> {getFieldDecorator("name", {rules: [nameRules]})( <input type="text" placeholder="please input ur name" /> )} {getFieldDecorator("password", {rules: [passwordRules]})( <input type="password" placeholder="please input ur password" /> )} <button onClick={this.submit}>提交</button> </div> ); } } ); ⾼阶组件 kFormCreate ：扩展现有表单，./components/kFormCreate.js import React, {Component} from "react"; export default function kFormCreate(Cmp) { return class extends Component { constructor(props) { super(props); this.state = {}; this.options = {}; } handleChange = e => { let {name, value} = e.target; this.setState({[name]: value}); }; getFieldDecorator = (field, option) => { this.options[field] = option; return InputCmp => React.cloneElement(InputCmp, { name: field, value: this.state[field] || "", onChange: this.handleChange //控件change 事件处理 }); }; getFieldsValue = () => { return {...this.state}; }; getFieldValue = field => { return this.state[field]; }; validateFields = callback => { let errors = {}; const state = {...this.state}; for (let field in this.options) { if (state[field] === undefined) { errors[field] = "error"; } console.log("item", field); //sy-log } if (JSON.stringify(errors) === "{}") { // 没有错误信息 callback(undefined, state); } else { // 有错误信息，返回 callback(errors, state); } }; render() { return ( <div className="border"> <Cmp {...this.props} getFieldDecorator= {this.getFieldDecorator} getFieldsValue={this.getFieldsValue} getFieldValue={this.getFieldValue} validateFields={this.validateFields} /> </div> ); } }; } 原文：视频课堂笔记