getFieldDecorator 注意事项

getFieldDecorator 方法其作用是能够在Form表单中配置验证规则

---

一：使用方法

function CreateOrUpdateAlarmForm(props) {
// 2- 解构Form;经过Form.create包装的组件将会自带this.props.form属性
  const {
    form: { getFieldDecorator },  // 解构getFieldDecorator
    deviceDisplayName,
    deviceAlias,
    deviceDesc,
    deviceName,
  } = props;

	const checkNumber = (rule, value, callback) => {
    if (value)
      if (!/^[0-9]+.?[0-9]*$/g.test(value))
        callback(new Error('请输入数字'));
    callback();
 };

// 3- 使用getFieldDecorator方法
  return (
    <Form layout="horizontal" labelCol={{ span: 6 }} wrapperCol={{ span: 14 }}>
      <Form.Item label={formatMessage({ id: 'summary.folder_select' })}>
        {getFieldDecorator('is_folder', {  // 参数一: 表示这个字段的id  参数二: 配置对象，可设置表单控件的校验规则rules
          rules: [],
          valuePropName: 'checked',
          initialValue: is_folder, // 初始值
        })(
          <Switch
            checkedChildren={'是'}
            unCheckedChildren={'否'}
          />
        )}
      </Form.Item>
      <Form.Item label={formatMessage({ id: 'common.key' })}>
        {getFieldDecorator('key', {
          initialValue: deviceName,
          rules: [{ required: true, message: '不能为空！' }], // 校验规则：required必填，message：<Input/>为空时报错信息
        })(<Input />)}
      </Form.Item>
      <Form.Item label={formatMessage({ id: 'common.name' })}>
        {getFieldDecorator('name', {
          initialValue: deviceDisplayName,
          rules: [
						{ 
							required: true, message: '不能为空！'
						},
						{
							validator:checkNumber, trigger:'blur'  // rules用自定义方法进行验证(validator属性); trigger:'blur' 表示当获得焦点时进行规则验证
						}
					],
        })(<Input />)}
      </Form.Item>
      <Form.Item
        label={formatMessage({ id: 'common.alias' })}
        rules={[{ required: true, message: '不能为空！' }]}
      >
        {getFieldDecorator('alias', {
          initialValue: deviceAlias,
          rules: [{ required: true, message: '不能为空！' }],
        })(<Input />)}
      </Form.Item>
    </Form>
  );
}

// 1- 通过Form.create(options)包裹Form组件
const WrappedCreateOrUpdateEquipmentForm = Form.create({ name: 'updateOrCreateEquipmentFormRef' })(CreateOrUpdateAlarmForm);

class EquipmentType extends React.Component {

	...代码

	onAddDevice = () => {
		const {dispatch,deviceTypeList} = this.props;
		const deviceType = this.state.deviceType;

		// 5- 使用ref获取Form表单数据
		this.updateOrCreateEquipmentFormRef.validateFields((err,values) => {   
			// err:form表单规则验证是否通过，通过：err返回null; 不通过:err返回相关message
			// values：返回Form表单的内容,通过getFieldDecorator的字段id获取,比如：values.alias为Form表单id为alias的<input/>输入内容。
			if(!err){
				deviceTypeList.map(item => {
					if(values.key === item.name){
						message.warning('key已经存在！')   // 提示warning
					}
					return item; // 循环遍历必须要return出一个值，不可以return;
				})
			}
			...代码
		})
	}

	<Modal
		onOk={this.onAddDevice}
	>
		{/* <WrappedCreateOrUpdateEquipmentForm />属于非受控组件 */}
		<WrappedCreateOrUpdateEquipmentForm 
			{/* 4- 通过ref关联Form表单 */}
			ref ={e => {this.updateOrCreateEquipmentFormRef = e }}
			{...this.state} {/* 将state数据传到Form表单中 */}
		/> 
	</Modal>

	
}

二：相关方法API

Form.create(options)

https://blog.csdn.net/weixin_41544124/article/details/87077344

三：相关文章关联

非受控组件和受控组件区别

属性Ref可以用来绑定到render()输出的任何组件上