React Antd Form表单使用

import React from "react"
import { Form, Input, Button, Row, Col } from 'antd';
const FormItem = Form.Item;

const FormTemp = (props) => {
  const { form } = props
  const { getFieldDecorator, setFields, validateFieldsAndScroll, getFieldsValue } = form
  const configs = [
    {
      label: "账号",
      code: 'account',
      required: true,
      disabled: false,
      detailValue: "", // 关联状态管理器的字段
      message: "请输入账号"
    },
    {
      label: "手机",
      code: 'phone',
      required: true,
      disabled: false,
      detailValue: "",
      message: "请输入手机号"
    },
    {
      label: "密码",
      code: 'password',
      required: true,
      disabled: false,
      detailValue: "",
      message: "请输入密码",
      type: "password"
    },
    {
      label: "输入的密码",
      code: 'inputPwd',
      required: true,
      disabled: false,
      detailValue: "",
    }
  ]

  const formItemLayout = { // 配合Col使用的话  Col的span属性 最大值24 根据布局需要
    labelCol: { span: 6 }, // 左侧关联文字
    wrapperCol: { span: 18 }, // 右边输入框 两者和最大24 否则会换行
  }

  const customizeValidator = (rule, value, callback, tag) => {
    if (!value) callback() // 无内容不校验  callback() 通过校验
    // 正则百度拿的
    const regs = {
      account: /^[a-zA-Z0-9_-]{4,16}$/, // 用户名正则，4到16位（字母，数字，下划线，减号）
      phone:  /^((13[0-9])|(14[5|7])|(15([0-3]|[5-9]))|(18[0,5-9]))\d{8}$/, //手机号正则
      password: /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,20}$/ // 密码至少包含 数字和英文，长度6-20
    }
    regs[tag].test(value) ? callback() : callback("请输入正确的内容～")
  }

  const customizeGetValueFromEvent = (e, item) => {
    // 跟使用的组件有关 input拿到value  返回value 或者自定义内容
    const value = e.target.value
    if (item.code === "password") {
      // 如果是密码框  获取到值 给要显示的那个组件就可以了
      setFields({
        inputPwd: { value }
      })
    }
    return value
  }

  const handleSubmit = () => {
    validateFieldsAndScroll((err, values) => {
      if (!err) {
        // 校验通过 拿到values
        console.log(values)
      } else {
        // 校验失败
      }
    })
  }

  return (
    <Form>
      <Row>
        {configs.map(item => {
          return (
            <Col span={12} key={item.code}>
              {/*最近布局都是用Row Col formItemLayout来操作的*/}
              <FormItem label={item.label} {...formItemLayout}>
                {getFieldDecorator(item.code, {
                  rules: [{
                    required: item.required,
                    // message: item.message, // 一般用message就够了
                    validator: (rule, value, callback) => customizeValidator(rule, value, callback, item.code), // 根据自己需要 设置校验内容
                  }],
                  getValueFromEvent: e => customizeGetValueFromEvent(e, item),
                  initialValue: item.detailValue,
                })(
                  // 自定义组件 需要使用onChange方法 修改value 组件内可以通过props拿到value
                  // initialValue 会转成 value
                  <Input
                    type={item.type}
                  />
                )}
              </FormItem>
            </Col>
          )
        })}
      </Row>
      <div>
        <Button onClick={handleSubmit}>提交</Button>
      </div>
    </Form>
  )
}

export default Form.create()(FormTemp)