设置value值错误

getFieldDecorator will override value

Warning: getFieldDecorator will override value, so please don’t set value directly and use setFieldsValue to set it

  • 通过 getFieldDecorator 绑定的表单不能设置 value属性
  • getFieldDecorator() 方法包装后的组件，会自动更新表单组件的value以及onChange事件
  • 无需再手动添加value属性，删除组件中定义的 value
  • 手动添加value属性才导致Warning的发生
  • 填写初始默认值可使用initialValue进行设置 ```jsx // 错误的用法 {getFieldDecorator(‘name’, { initialValue: state.name, rules: [{ required: true, message: ‘请输入名称’ }], })()}

// 正确的用法

{getFieldDecorator(‘name’, { initialValue: value.name, rules: [{ required: true, message: ‘请输入名称’ }], })()} 

  2. - 使用 Form.create()(App) 之后的component 会接收到一个props.form
  3. - 使用 **props.form**下的一系列方法，表单就具备自动校验功能的表单
  4.    - 受控组件，能自动的绑定 value和 onChange
  7. <a name="FSRd2"></a>
  8. ### 自定义组件
  9. SelectApp自定义组件内部不要用 PropTypes.defaultProps = {} 验证 value的值<br />通过解构赋值的方式，设置 默认值
  10. ```jsx
  11. import React, { useEffect, useState, memo } from 'react';
  12. import PropTypes from 'prop-types';
  14. SelectApp.propTypes = {
  15.   // value: PropTypes.oneOfType([PropTypes.number, PropTypes.object]);
  16.   onChange: PropTypes.func,
  17.   labelInValue: PropTypes.bool,
  18.   allowClear: PropTypes.bool,
  19. };
  20. SelectApp.defaultProps = {
  21.   // value: undefined,
  22.   onChange: () => {},
  23.   labelInValue: false,
  24.   allowClear: false,
  25. };
  27. function SelectApp({value = undefined, onChange}) {
  29.   return (<Select />)
  30. }

父组件调用

  1. <Form.Item label="名称">
  2.   {getFieldDecorator('name', {
  3.     initialValue: state.id ? { key: value.id } : undefined,
  4.    rules: [{ required: true, message: '请输入名称' }],
  5.   })(<SelectApp labelInValue />)}
  6. </Form.Item>

受控的表单

https://3x.ant.design/components/form-cn/
image.png