Form.create

通过 getFieldDecorator绑定的组件，不能传递的属性有

1. id，会覆盖默认的 id:13, 传递的 id为 dataSource[0].key 是当前的 id
2. value，initialValue代替

   <Item label="Key">
   {getFieldDecorator(`${KEY}.key`, {
    // initialValue: _value.key,
   })(<KeysSelect currentKey={_value.key} id={13}/>)}
   </Item>

Form.create用法

function BaseForm({form}) {
  function onSubmit(e) {
      e.preventDefault()
    form.validateFields((err, values) => {
      console.log('form', err)
    })
  }
  return (
      <Form onSubmit={onSubmit}>
      <Button htmlType='submit'>提交</Button>
    </Form>
  )
}
export default Form.create()(BaseForm)
export default memo(Form.create()(BaseForm))
// onChange获取数据
export default Form.create({
  onValuesChange(props, changedValues) {
    setTimeout(() => {
      const values = props.form.getFieldsValue()
      props.onChange(values, changedValues)
    }, 0)
  }
})(BaseForm)

form

form是个黑盒子，外部数据改变不会影响到 form
获取form的值，必须通过 form.getFieldsValue() 来获取

initialValue

1. 使用 getFieldDecorator并用 initialValue设定初始值时，当改变组件的值时，组件表现出的值也改变了
2. 但这个值并不是initialValue设定的，其是组件内部的state值保持的，
3. 如果需要继续用 initialValue来设定组件的值，需要调用 resetFields方法使 initialValue有效

设置 value值报错

1. Warning: getFieldDecorator will override value, so please don’t set value directly and use setFieldsValue to set it.
2. 用 Form.create()() HOC，可以从 props中获取到 form.getFieldDecorator
3. 不能使用 value，要用 initialValue

form.getFieldsValue

form.setFieldsValue

1. form.setFieldsValue传来的数据这个方法只能适用于field存在的前提下，即数据和field是一对一的关系
2. 多传了一个参数！！所以导致了报警告
3. updateList的数据出了问题才会报警告，因为封装的form中的field中没有 ids这个参数
   1. form.setFieldsValue不要多传值
   2. 
      
4. componentWillReceiveProps的替代升级方案 getDerivedStateFromProps
5. antd的form组件setFieldsValue在ComponentWillreceiveProps中会死循环的解决方案
   1. 先判断值是否变化，不重复执行应该就不会死循环了

// form.setFieldsValue 有死循环的问题
componentDidMount(){
  const { form,updateList, productList } = this.props
  // 给form赋值
  form.setFieldsValue({
    'service_name': updateList.service_name,
    'fileType': updateList.fileType,
    'press': updateList.press,
    'remark': updateList.remark,
  })
}

@Form.create装饰器

装饰器语法 https://segmentfault.com/p/1210000009968000/read
装饰器语法只能用在 class组件，Hooks函数组件无法使用装饰器

import React, { PureComponent } from 'react';
import { Form, Input } from 'antd';
import styled from './style.modules.less';
@Form.create() // 装饰器语法
class App extends PureComponent {
  renderItem = ({ item, index }) => {
    return (
      <Form.Item label="名称">
        {getFieldDecorator(`list.${index}.name`)(
          <Input />
        )}
      </Form.Item>
    );
  };
  render() {
    const { data } = this.props;
    return (
      <Form className={styled.form}>
        {data.map((item, index) => this.renderItem({ item, index }))}
      </Form>
    );
  }
}
export default App;