antd form.create()表单数据绑定
实现的主要原理：利用高阶组件对原组件props属性方法再封装，可以理解为组件/函数方法中传参为组件，外层可嵌套多层函数或组件；
创建组件类
/**
* 模拟antd下的Form下挂载create方法
* 使用方法Form.create(component) 或 @Form.create class Dmo extent Component{}
*/
class Form extends React.PureComponent { }
Es6 @可修饰类和类里面的属性，无法修饰函数：
- 修饰器只能用于类和类的方法，不能用于修饰函数，因为存在函数提升。
- 由于存在函数提升，使得修饰器不能用于函数。类是不会提升的，所以就没有这方面的问 题。
高阶组件属性代理
import React from "react";
import fieldStore from "./fieldStore";
import { comparisonObject } from "./utils/common";
Form.create = (option = {}) => {
const {
scrollIntoView, // 表单提交异常时滚动表单项到视图中央
callback_onErr, // 接收表单异常处理方法
} = option;
return (WrappedComponent) => {
return class extends React.Component {
constructor() {
super();
this.state = {};
this.fieldStore = fieldStore()
}
/** 表单容器 */
getFieldDecorator = (key, config = { rules: [], initialValue }) => {
if (!key) throw Error("getFieldDecorator Error: lost formItem key");
let rules = this.fieldStore.rules;
let store = this.fieldStore.store;
let initialMata = this.fieldStore.initialMata;
if (rules[key] === undefined || (rules[key].length && !comparisonObject(rules[key][0], config.rules[0]))) {
this.fieldStore.dispatchRules(key, config.rules);
}
if (!(key in initialMata)) {
this.fieldStore.dispatchInitialMeta(key, config.initialValue);
}
return (ComponentF) => {
const onChange = (v) => {
if (ComponentF.props.onChange) ComponentF.props.onChange(v);
const type = Object.prototype.toString.call(v);
this.fieldStore.dispatchStore(key, type === "[object Object]" ? (v.target.value || e.target.checked) : v);
this.forceUpdate(); // 强制属性刷新
}
const propsNew = {
...ComponentF.props,
onChange: e => onChange(e),
defaultValue: initialMata[key] || ComponentF.value,
}
let EleType = ComponentF.type.name;
if (typeof ComponentF.type === 'function') propsNew.value = store[key] || initialMata[key] || ComponentF.value;
if (EleType === "Switch") propsNew.checked = store[key] || initialMata[key] || ComponentF.checked;
if (scrollIntoView) {
propsNew.id = `${key}ByGetFieldDecorator`;
}
const newTree = React.cloneElement(ComponentF, propsNew, ComponentF.props.children);
return newTree;
}
}
validateFieldsWraped = (submit) => {
if (this.state.submitting) return;
this.fieldStore.validateFields((errMess, store) => {
if (scrollIntoView) {
return document.querySelector(`#${errKey}ByGetFieldDecorator`).scrollIntoView({ block: "center", behavior: "smooth" });
}
if (callback_onErr && errMess) {
return callback_onErr(errMess);
}
if (errMess) return console.error(errMessage);
this.setState({ submitting: false })
submit(errMess, store);
})
}
submitting = () => {
return Boolean(this.state.submitting)
}
addtionaProps = () => {
return {
getFieldDecorator: this.getFieldDecorator,
setFieldsValue: this.fieldStore.setFieldsValue,
getFieldValue: this.fieldStore.getFieldValue,
validateFields: this.validateFieldsWraped,
resetFields: this.fieldStore.resetFields,
store: this.fieldStore.store,
submitting: this.submitting(),
}
}
render() {
var props = { form: this.addtionaProps() };
return (
<WrappedComponent
{...this.props}
{...props}
/>
)
}
}
}
}
fieldStore
/**
* 表单仓库
*/
class FieldStore {
constructor(fields) {
this.store = { ...fields };
this.rules = {};
this.initialMata = {};
}
dispatchStore = (key, value) => {
this.store[key] = value;
}
dispatchInitialMeta = (key, value) => {
this.initialMata[key] = value;
}
dispatchRules = (key, rule) => {
this.rules[key] = rule;
}
getFieldValue = (key) => {
return this.store[key] || this.initialMata[key];
}
setFieldsValue = (props) => {
this.store = {
...this.store,
...props,
}
}
resetFields = () => {
this.store = { ...fields };
this.rules = {};
this.initialMata = {};
}
validateFields = (submitting) => {
let errFlag = false,
errMessage = "",
errKey = "",
rules = this.rules;
let store = Object.assign(this.initialMata, this.store);
for (let i = 0; i < Object.keys(store).length; i++) {
let item = store[Object.keys(store)[i]];
if (rules && rules[Object.keys(store)[i]]) {
let r = rules[Object.keys(store)[i]];
if (r && r.length && r[0].required && (!item && item !== 0 && item !== false)) {
errFlag = true;
errMessage = r[0].message || "表单填写不完全";
errKey = Object.keys(store)[i];
} else if (r.length === 2 && r[1].validator) { // 自定义校验可正则
function call(mess) {
if (mess) {
errMessage = mess || "表单项格式不正确";
errFlag = true;
errKey = Object.keys(store)[i];
}
}
// 传入表单值、回调函数, 回调函数是否返回errMessage控制
try {
r[1].validator(item, call);
} catch (error) {
errMessage = error;
}
}
if (errMessage) break;
}
}
submitting(errMessage, store);
}
}
export default function createFieldsStore(fields) {
return new FieldStore(fields);
}
使用
import { Button, Toast, Picker, List } from "antd-mobile";
import Form from "./components/Form";
import React from "react";
@Form.create({
callback_onErr: (mess) => {
console.log(mess)
Toast.fail(mess)
}
})
class Demo extends React.Component {
submit = () => {
const { form: { validateFields } } = this.props;
validateFields((err, fieldsValue) => {
if (err) return;
console.log(fieldsValue, "表单数据集合》》》》》》》》》》》》》》》》》》》")
})
}
render() {
const { form: { getFieldDecorator, getFieldValue, store } } = this.props;
return (
<div>
<div>
{
getFieldDecorator("a", {
initialValue: [1],
rules: [{ required: true, message: "手机号不能为空" }],
})(
<Picker
data={[{ label: "是", value: 2 }, { label: "是213", value: 1 }]}
cols={1}
>
<List.Item arrow="horizontal"></List.Item>
</Picker>
)
}
</div>
<div>
{
getFieldValue('a') == 1 ? getFieldDecorator("bbbbbbbbb", {
initialValue: 'bbbbbbbbb',
rules: [{ required: true, message: "手机号不能为空" }],
})(
<input placeholder="请输入手机号" />
) : ''
}
</div>
<div>
{
getFieldValue('a') == 2 ? getFieldDecorator("ccccccccc", {
initialValue: 'ccccccccc',
rules: [{ required: true, message: "手机号不能为空" }],
})(
<input placeholder="请输入手机号" />
) : ''
}
</div>
<Button onClick={this.submit}>提交</Button>
</div>
)
}
}
