react+antd监听Form内的值改变

项目场景：在使用Form组件时实时获取最新值

提示：简述问题使用场景

使用Form组件时，通常无法直接在页面上取得最新值，导致无法根据新的参数去页面上做一些改动，今天带来两种方法在页面内实时获取Form内最新的值

---

方法一

提示：如果不需要Form.Item的默认样式可以添加noStyle来去除默认样式
通过Form.Item的 shouldUpdate 实时取得最新值

import React, { useState, useEffect } from "react";
import { Form, Input } from "antd";

const FormItem = Form.Item;
export default function stepLottery(props) {
	const [formRef] = Form.useForm();
	//formRef.setFieldsValue({}); 修改Form所有数据
	//formRef.setFieldValue('imgUrl', '...png'); 修改单个字段数据
	return (
		<Form
	        form={formRef}
	        name="control-ref"
      	>
	      	<FormItem
	          name="imgUrl" 
	          label="我是一张图片"
	          initialValue={''}
	        >
          		<Input placeholder="请输入页面图片地址" />
	        </FormItem>
	        //noStyle 去除默认样式，判断前一个值和当前值是否一样，不一样则刷新，监听Form数据变化
	      	<FormItem noStyle shouldUpdate={(prevValues, curValues) => prevValues !== curValues}>
	      		{({ getFieldValue }) => {
	             return (
	                 <>
	                     {
	                       /\.(png|jpg|gif|jpeg|webp)$/.test(getFieldValue(`imgUrl`)) && 
	                       <img src={getFieldValue(`imgUrl`)} alt="" />
	                     }
	                 </>
	             );
	         }}
	      </FormItem>
      </Form>
	)
}

方法二

提示：该方法为antd 内Form组件封装的一个Hook详情可翻看官方文档
相比于方法一这个方法更加简洁

import React, { useState, useEffect } from "react";
import { Form, Input } from "antd";

const FormItem = Form.Item;
export default function stepLottery(props) {
	const [formRef] = Form.useForm();
	//监听单一数据imgUrl
	const imgUrl = Form.useWatch('imgUrl', formRef);
	return (
		<Form
	        form={formRef}
	        name="control-ref"
      	>
	      	<FormItem
	          name="imgUrl" 
	          label="我是一张图片"
	          initialValue={''}
	        >
          		<Input placeholder="请输入页面图片地址" />
	        </FormItem>
	        {
               /\.(png|jpg|gif|jpeg|webp)$/.test(imgUrl) && 
               <img src={imgUrl} alt="" />
           	}
      </Form>
	)
}

ps：如有问题欢迎纠正

---