form

对于 antd 修改范围最大的就是 form 组件了, 从校验，写法 等各个方面,最初升级 v4 还是好久的事了， 记录了一下，找不到那个文档了

• getFieldDecorator(弃用): 替换为 Form.Item 添加name 注册和获取表单值(前提是在最外层的 Form上添加 form)
• 不再提供实时表单数据回填默认值, 在最初更新版本时官方给出的答案是破坏了默认值的机制
• 必需是 Form.Item 直接包裹内置组件或者自定义组件(支持 value 和 onChange回调)才会触发 form机制，否则仅仅是一个样式布局而已

• 触发 onFieldsChange 和 onValuesChange 的参数变化

  • v3为 props, changedFields 和 allFields 且都为对象
  • v4 changedFields和allFields 都为数组

    定义 form

    v3

    // 通过 Form.create()(Demo) 方式将 form 注入到组件内部
    const Demo = ({ form }) => {
    return <Form></Form>
    }

    v4

    // 通过转发 ref 获取到函数组件内部实例
    const Demo = React.forwardRef((props, ref) => {
    // 如果不手动定义并添加到 form 上, 可能并不会走 form 获取表单 & 校验机制
    const [form] = Form.useForm();
    return <Form ref={ref} form={form}></Form>
    });

    定义表单值

• 删除了以前的 getFieldDecorator 定义表单组件

• 重置表单值时机变化

• 通过 getFieldValue 和 getFieldsValue 获取的值不再是实时表单数据 ```typescript // data为外部 props 传递表单初始值 const Demo = ({ form, data }) => { const { getFieldsValue, getFieldValue, getFieldDecorator } = form;

  // 这里的初始值 return (

  <Form>
    <Form.Item label="用户名">
        {getFieldDecorator('userName', {
            initialValue: data.userName
        })(
              <Input />
          )}
    </Form.Item>
        {/** 如果选择其他则展示输入框 */}
        <Form.Item label="性别">
    {getFieldDecorator('gender', {
         initialValue: data.                   
     })(
        <Select>
          <Option>男人</Option>
          <Option>女人</Option>
           <Option value="other">其他</Option>
      </Select>
    )}
    // 只有选择其他时才展示
            {getFieldValue('gender') === 'other' && (
        <Fragment>
                    {getFieldDecorator('value')(
                <Input />
            )}
      <Fragment>
    )}
  </Form.Item>

  ) }

export default Form.create()(Demo);

<a name="SWNwI"></a>
#### v4

- [参考复杂表单](https://ant.design/components/form-cn/#components-form-demo-complex-form-control)
```typescript
const Demo = () => {
    const [form] = Form.useForm();
  // 需要手动在 useEffect 中执行重置
  useEffect(() => {
    form.resetFields();
  }, [])

  return (
      <Form form={form}>
        <Form.Item label="用户名" name="userName" initialValue="">
          <Input />  
      </Form.Item>
            <Form.Item label="性别" name="gender" initialValue="">
        <Select>
            <Option>呵男人</Option>
                    <Option>女人呵</Option>
                    <Option value="other">其他</Option>
                </Select>
      </Form.Item>
            // 参考: https://ant.design/components/form-cn/#dependencies
            // 有时稍微不对， 表单就不渲染
            <Form.Item noStyle dependencies={['gender']}>
        // 这里可以获取到实时表单数据
        {({ getFieldValue }) => {
            if (getFieldValue('gender') === 'other') {
              return (
                  <Form.Item noStyle name="value">
                    <Input />
                </Form.Item>
              )
          }

          return null;
        }} 
       <Form.Item>
      </Form.Item>
    </Form>
  )
}