Antd5 Form表单输入组件
表单、表格、图像、日期选择器、下拉列表、文件选择器、容器、地图、模式、富文本编辑

  1. Input 文本输入框
    1. type=input
    2. type=textarea
  2. InputNumber 数字输入
  3. RichText 富文本
  4. AutoComplete 自动提示
  5. Cascader 多级联动
  6. ColorPIcker 颜色选择
  7. DatePicker 日期选择
    1. TimePicker 时间选择
  8. Upload 上传
  9. Select 下拉
    1. SelectRemote 远程获取数据
    2. SearchUser 搜索人员
    3. SearchDepartment 搜部门，支持模糊搜索
    4. SelectI18nRemote 多语言远程搜索
    5. DropdownRemote
    6. Enum 枚举类，传入值，显示枚举
  10. Checkbox 复选框
    1. CheckboxGroup
    2. CheckboxGroupRemote
  11. Radio 单选
    1. RadioGroup 多个单选
    2. RadioGroupRemote
  12. Rate 评分
  13. Switch 开关
  14. Slider 滑块
  15. Tree 树形
    1. isLeaf: true, 有叶子节点（children子组件）

时间组件

时间
日期
时间日期
日期范围选择

省市区组件

省市区三级联动
省市区勾选
地图经纬度选择器

文件上传

单文件上传
多文件上传
多文本编辑框
富文本编辑器
RichText富文本输入框
Markdown输入框
二维码生成
Curl
IP 地址转地区

单图上传
多图上传
图片裁剪上传
颜色选择器

受控组件

value 的值类型
onChange参数的值

  1. value就是值
  2.     InputNumber
  3.   Select
  5. e.target.checked
  6.     CheckBox
  7.   RadioGroup
  8.   Input

form属性

  1. labelCol：指定label的 col宽度
  2. wrapCol：指定表单输入控件的 col宽度
  3. span跨距
  4. col应该是column的缩写，表示列
  5. wrapper包装器

  6. offset是表示偏移量，一个东西相对另一个的距离

    1. <Form
    3. >

Form.item

  1. 同名表单项的值共享，并且其中一个的值改变，另外的同名表单的值也一致改变
  2. 同名的表单被当成完全相同的表单项处理，数值和onChange行为都一样，两个表单项的onChange始终只执行了最后一个表单项的onChange事件
    1. 动态新增表单会出现表单同名的问题
    2. FormItem中 name的唯一性
  3. 要想得到正确的结果，应该分别分别修改两个表单中的域名
  4. 装饰器语法 https://segmentfault.com/p/1210000009968000/read ```jsx import React, { PureComponent } from ‘react’ import { Form, Input } from ‘antd’ import styles from ‘./styles.less’

@Form.create() // 装饰器语法 class Example extends PureComponent {

renderItem = ({item, index}) => { return ( {getFieldDecorator(list.${index}.name)( )} ) }

render() { const {data} = this.props return (

{ data.map((item, index) => this.renderItem({item, index}) )}
) } }

  3. <a name="9kC7P"></a>
  4. ### textarea
  5. ```jsx
  6. <Input.Textarea
  7.   placeholder=""
  8.   cols=""
  9.   rows=""
  10.   maxlength=""
  11.   minlength=""
  12.   name="textarea"
  13.   />
  15. // css
  16. textarea {
  17.   resize: none; // 禁止拖拽
  18. }

表单布局可以错落有致

表单宽度的处理方式核心旨在解决两个问题

  1. 暗示填写内容长度；
  2. 表单项布局排列效果，通过设置合理的默认宽度尺码和描述关系
    1. input 所需填写内容都存在理想长度
    2. XS - 80~160px、S - 160~280、M - 280~360px、L - 360px~480px、XL - 480~560px。
    3. 让组合 input 和单个 input 对齐概率最大化

react表单可视化
https://blog.csdn.net/weixin_39652154/article/details/111618031
https://github.com/blackjk3/react-form-builder
https://github.com/dog-days/antd-react-form-builder

form4.x

Form 不再需要通过 Form.create() 创建上下文。
Form 组件现在自带数据域，因而 getFieldDecorator 也不再需要，直接写入 Form.Item 即可：
onFieldsChange 等方法移入 Form 中，通过 fields 对 Form 进行控制。
调用 form 方法，可以通过 Form.useForm() 创建 Form 实体进行操作

resetFields 是重置回 initialValues 的值，并且 initialValues 只用于第一次初始化，不响应后续的变化
initialValue 只能作为组件初次挂载的时候生效。
让 Form 随着组件的销毁一起销毁， 这样每次就都是新的了

antd-4x.form.js

  1. const Demo = () => {
  2.   const [form] = Form.useForm();
  4.   useEffect(() => {
  5.     // 初始化的默认数据
  6.     form.setFieldsValue({
  7.       username: 'Bamboo',
  8.     });
  9.   }, []);
  11.   function onFinish() {}
  13.   return (
  14.     <Form
  15.       form={form}
  16.       initialValues={{
  17.         name: record ? record.name : 1
  18.       }}
  19.       onFinish={onFinish}
  20.       >
  21.       <Form.Item 
  22.         label="用户"
  23.         name="username" rules={[{ required: true }]}>
  24.         <Input />
  25.       </Form.Item>
  26.     </Form>
  27.   )
  28. };

form3.x

getFieldDecorator
Form.create
getFieldDecorator 被当成 props 传值
【备注】4.0 不需要 getFieldDecorator 和 Form.create 这两个方法

Form.create

经 Form.create() 包装过的组件会自带 this.props.form 属性
但initialValue属性必须设置在getFieldDecorator()
Form 将默认聚合表单数据域，你不再需要通过 Form.create() 创建上下文。
Fom.Item 将默认聚合表单字段，你不需要通过 getFieldDecorator 绑定 Field。
Form.Item 的值将总会保留，但是其验证功能只有表单项可见时才会生效

使用 Form.create 处理后的表单具有自动收集数据并校验的功能，但如果您不需要这个功能，或者默认的行为无法满足业务需求，可以选择不使用 Form.create 并自行处理数据。

  1. class ListForm extends React.Component {}
  3. // ListForm = Form.create({})(ListForm) 默认导出的是 Form.create()()
  4. export default Form.create({})(ListForm)
  7. // antd v3
  8. const ListFrom = props => {
  9.   const { getFieldDecorator, setFieldsValue } = props.form
  10.   useEffect(() => {
  11.     setFieldsValue({
  12.       username: 'Bamboo',
  13.     });
  14.   }, []);
  16.   return (
  17.     <Form>
  18.       <Form.Item>
  19.         {getFieldDecorator('username', {
  20.           rules: [{ required: true }],
  21.         })(<Input />)}
  22.       </Form.Item>
  23.     </Form>
  24.   )
  25. }
  26. export default Form.create({})(ListFrom);

form常见错误

antd Switch 报错：[antd: Switch] _value_ is not validate prop, do you mean _checked_?

  1. <FormItem label="开关">
  2.   {getFieldDecorator('switch', {
  3.     valuePropName: 'checked'
  4.   })(<Switch onChange={this.onChange} />)}
  5. </FormItem>

Warning: _getFieldDecorator_ will override _value_, so please don’t set _value_ directly and use _setFieldsValue_ to set it.

  1. 用 Form.create()() HOC，可以从 props中获取到 form.getFieldDecorator
  2. 不能使用 value，要用 initialValue

setFieldsValue

You cannot set a form field before rendering a field associated with the value.
直译了下warning描述，说是关联的field渲染前，用set给form的field赋值

怎么解决呢
1、在form组件显示出后，再用this.form.setFieldsValue
2、在this.$nextTick(）中使用this.form.setFieldsValue
3、如果要表单绑定的数据和属性不匹配也会出现这个问题

  • 在使用this.form.setFieldsValue时，赋值的数据要一一匹配field
  • 用不到的不要赋值即可，这样操作之后错误提示就不再提醒了

setFieldsValue的字段要对应得上
在使用setFieldsValue给表单Form的某一个filed赋值时，可能掺杂了非表单控件中的字段，
Form表单在赋值和渲染时发现有些字段无法渲染在现有的字段（因为不存在），所以就会报出这样的错误提示

this.props.form.form.setFieldsValue 传值的时候只能是form中用到的参数(即是getFieldDecorator方法中的field)没有的field一律不允许多传，否则就会报错
原因：多传递了多余的字段，自己数数和测测，看看是否传递了没有的字段