getFieldDecorator

antd-form

https://blog.csdn.net/kelly0721/article/details/87382909
https://blog.csdn.net/deng1456694385/article/details/86090884
ju.outofmemory.cn/entry/348216

import React from 'react';
import {
  Row, Col, Form, DatePicker, Select, Button, Checkbox, Table, Switch, Input  
} from 'antd';
const { Option } = Select;
const FormItem = Form.Item;
const formItemLayout = {    // label 和input宽度
  labelCol: { span:6 },
  wrapperCol: { span: 18 },
};
function UserForm(props) {
  const { getFieldDecorator, resetFields, validateFields } = props
  function onSubmit() {
    //获取所以输入框的值（value），并且获取到输入框是否报错
    validateFields((error, value)=> {
      console.log(error, value)
    })
  }
  function onClear() {
    resetFields()
  }
  return (
    <Form {...formItemLayout}>
      <Form.Item label="数值类型">
        {getFieldDecorator(`rule[${index}].name`, {
          initialValue: item.name,
          rules: [
            { required: true, message: "请选择用户" },
          ],
        })(
          <Select placeholder="请选择用户">
            <Option value="1">lucy</Option>
            <Option value="2">gaode</Option>
          </Select>
        )}
      </Form.Item>
      <FormItem {...formItemSwitch} label="包含不可用品种">
        {getFieldDecorator('flag',{
          valuePropName: 'checked',
          initialValue: false,
        })(
          <Switch checkedChildren="是" unCheckedChildren="否" />
        ) }
      </FormItem>
    </Form>
  )
}
export default Form.create()(UserForm)

getFieldDecorator

getFieldDecorator是一个方法，这个方法接收两个参数，第一个是表单的字段对象，第二个是验证规则。这个方法本身返回一个方法，需要将需要获取值的标签包裹进去

1. initialValue的值会覆盖子组件中的placeHolder
2. getFieldValue不能获取没有使用getFieldDecorator绑定的控件
   1. 如果控件值标注了id属性，用这个方法无效
   2. 用 document.getElementById(“id名”).value的方式进行获取值

      <From>
      <FormItem>
      //JS代码书写时需要用 { } 包裹起来，不能直接写在代码块中  
      {
      getFieldDecorator('name',{
        initialValue:'lucy',
        rules:[]
      })(
        <Input placeholder='请输入用户名'/>
      )
      }
      </FormItem>
      </From>

错误的 getFiledDecorator写法

使用 getFiledDecorator注册的组件最外层必须是绑定的组件，
如果你写成这样的话使用 setFieldsValue是无效的

<Form.Item label="名称">
  {getFieldDecorator('name')(
    <div> // 多余的 div
      <Input
      className={styles.input}
      placeholder="请输入名称"
      />
      <span>字数限制</span>
    </div>
  )}
</Form.Item>

获取表单的数据

form.getFieldValue('data')
form.getFieldsValue()

设置表单的数据

getValueFromEvent

setFieldsValue设置当前的form中正在输入的input值
用options.getValueFromEvent解决了，它可以把 onChange 的参数（如 event）转化为控件的值

<Form.Item>
  {getFieldDecorator('name', {
    rules: [{ required: true, message: 'Please input your username!' }],
    getValueFromEvent: e => {
      // 进行你想要的操作
      return e;
    }
  })(
    <Input />
  )}
</Form.Item>

清除表单的值

this.props.form.resetFields();

antd动态表单

Object对象格式
{0: {name: ‘lucy’}, 1: {name: ‘gaode’} }

// form.getFieldValue('rule') 是对象格式 {0: {}, 1: {} }
<Form.Item label="数值类型">
  {getFieldDecorator(`rule.${index}.name`, {
    initialValue: item.type,
    rules: [
      { required: true, message: "请选择用户" },
    ],
  })(
    <Select placeholder="请选择用户">
      <Option value="1">lucy</Option>
      <Option value="2">gaode</Option>
    </Select>
  )}
</Form.Item>

Array 数组对象格式，用
[{name: ‘lucy’}, {name: ‘gaode’} ]

// form.getFieldValue('rule') 数组格式 [{},{}]
<Form.Item label="数值类型">
  {getFieldDecorator(`rule[${index}].name`, {
    initialValue: item.name,
    rules: [
      { required: true, message: "请选择用户" },
    ],
  })(
    <Select placeholder="请选择用户">
      <Option value="1">lucy</Option>
      <Option value="2">gaode</Option>
    </Select>
  )}
</Form.Item>

refs

Function components cannot be given refs. Attempts to access this ref will fail. Did you mean to use React.forwardRef()?

package.json install rc-util

"rc-util": "^5.0.6",

参考
https://github.com/ant-design/ant-design/issues/25802

rc-form

1. rc-form http://react-component.github.io/form

redux-form