【AntDesign】Form 表单使用踩坑记录 (一)

技术栈

AntDesign 版本 ： 3x

踩坑记录

一. @onChange

因为我的Form组件已使用了getFieldDecorator进行包装, 数据同步被Form接管, 那么每个表单控件都会自动添加onChange方法, 此处给Select添加了onChange={handleChangeType()} , 于是在handleChangeType()方法里, 除了监听到Select， 还可以监听到其他FormItem的数据变动。

如果只想监听当前Select Item，可以给handleChangeType做个绑定 onChange={handleChangeType.bind()}

        <FormItem label="分类" hasFeedback {...formItemLayout}>
          {getFieldDecorator('resourceType', {
            initialValue: formDataList.resourceType || '',
            rules: [
              {
                required: true,
                message: '必选项',
              },
            ],
          })(
            <Select style={{ width: '100%' }} onChange={handleChangeType()}>
              <Option value="richtext">图文</Option>
              <Option value="audio">多音频</Option>
              <Option value="pdf">PDF</Option>
              <Option value="h5Link">外链H5</Option>
            </Select>
          )}
        </FormItem>


  const handleChangeType = (key, value) => {
    let fields = getFieldsValue()
    fields[key] = value
    formDataList = fields
    console.log(formDataList, '表单值')
  }

二. Form setFieldsValue

如果在自定义组件事件中更改FormData的话, 无法实际对其更改, 只能使用setFieldsValue()

  const onChangeText = e => {
    // console.log(e.val, '页面接收到的html')
    if (e.val) {
      setTimeout(() => {
       // 此处只需赋值的属性名即可
        setFieldsValue({ resourceHtml: e.val })
      }, 300)
    }
  }

代码

import '@wangeditor/editor/dist/css/style.css' // 引入 css

import React from 'react'
import PropTypes from 'prop-types'
import { Form, Input, Select, Row, Col, Icon, Button } from 'antd'
import TextEditor from 'components/TextEditor'

import { connect } from 'dva'
import classnames from 'classnames'
import * as app from 'models/app'

const { state } = app.default

const FormItem = Form.Item
const { Option } = Select
const formItemLayout = {
  labelCol: {
    span: 2,
  },
  wrapperCol: {
    span: 14,
  },
}

const Add = ({
  dispatch,
  // 经 Form.create() 包装过的组件会自带 this.props.form 属性
  // 注意：使用 getFieldsValue getFieldValue setFieldsValue 等时，应确保对应的 field 已经用 getFieldDecorator 注册过了。
  form: { getFieldDecorator, getFieldsValue, setFieldsValue, resetFields },
  onBack,
  onSubmit,
}) => {
  let formDataList = {
    resourceName: '',
    resourceBanner: '',
    resourceType: 'richtext',
    resourceLink: '',
    resourceHtml: '',
  }

  const handleChangeType = (key, value) => {
    let fields = getFieldsValue()
    fields[key] = value
    formDataList = fields
    console.log(formDataList, '表单值')
  }

  const onChangeText = e => {
    // console.log(e.val, '页面接收到的html')
    if (e.val) {
      setTimeout(() => {
        setFieldsValue({ resourceHtml: e.val })
      }, 300)
    }
  }

  const onSubmitFn = e => {
    onSubmit({ formDataList })
    // console.log(formDataList , '提交的表单值')
    resetFields()
  }

  return (
    <div>
      <Form layout="horizontal">
        <FormItem label="名称" hasFeedback {...formItemLayout}>
          {getFieldDecorator('resourceName', {
            initialValue: formDataList.resourceName || '',
            rules: [
              {
                required: true,
                message: '请填写20个字符内的名称',
                max: 20,
                whitespace: true,
              },
            ],
          })(<Input />)}
        </FormItem>

        <FormItem label="顶图" hasFeedback {...formItemLayout}>
          {getFieldDecorator('resourceBanner', {
            initialValue: formDataList.resourceBanner || '',
            rules: [
              {
                required: true,
                message: '必选项',
              },
            ],
          })(<div>图片上传</div>)}
        </FormItem>

        <FormItem label="分类" hasFeedback {...formItemLayout}>
          {getFieldDecorator('resourceType', {
            initialValue: formDataList.resourceType || '',
            rules: [
              {
                required: true,
                message: '必选项',
              },
            ],
          })(
            <Select style={{ width: '100%' }} onChange={handleChangeType()}>
              <Option value="richtext">图文</Option>
              <Option value="audio">多音频</Option>
              <Option value="pdf">PDF</Option>
              <Option value="h5Link">外链H5</Option>
            </Select>
          )}
        </FormItem>

        {formDataList.resourceType == 'h5Link' && (
          <FormItem label="H5外链" hasFeedback {...formItemLayout}>
            {getFieldDecorator('resourceLink', {
              initialValue: formDataList.resourceLink || '',
              rules: [
                {
                  required: true,
                  message: '必选项',
                },
              ],
            })(<Input />)}
          </FormItem>
        )}

        {formDataList.resourceType == 'richtext' && (
          <FormItem label="图文详情" {...formItemLayout}>
            {getFieldDecorator('resourceHtml', {
              initialValue: formDataList.resourceHtml || '',
              rules: [
                {
                  required: true,
                  message: '必选项',
                },
              ],
            })(<TextEditor onChangeText={onChangeText} />)}
          </FormItem>
        )}
      </Form>
    </div>
  )
}

FormData.propTypes = {
  dispatch: PropTypes.func,
}
export default Form.create()(Add)