一、应用场景

使用的场景主要来源于工作或者我们具体的项目需求，比如当需要边填写表单并实现边预览可以采用Form useWatch Hooks的方式。

二、useWatch

4.20.0 新增，用于直接获取 form 中字段对应的值。通过该 Hooks 可以与诸如 useSWR 进行联动从而降低维护成本

import React from 'react';
import { Form, Input, InputNumber, Typography } from 'antd';const Demo = () => {const [form] = Form.useForm<{ name: string; age: number }>();const nameValue = Form.useWatch('name', form);return (<><Form form={form} layout="vertical" autoComplete="off"><Form.Item name="name" label="Name (Watch to trigger rerender)"><Input /></Form.Item><Form.Item name="age" label="Age (Not Watch)"><InputNumber /></Form.Item></Form><Typography><pre>Name Value: {nameValue}</pre></Typography></>);
};export default Demo;

三、关键代码

  const [form] = Form.useForm<{ name: string; age: number }>();// 获取表单name字段的是实时值，从而进行渲染展示。const nameValue = Form.useWatch('name', form);

Ant Design Form组件表单实时预览相关推荐

【前端笔记】Ant Design Form组件 resetFields() 与 setFieldsValue() 之比较
Ant Design Form组件 resetFields() 与 setFieldsValue() 之比较关键词:React,Ant Design,Form组件,组件渲染一.问题描述 Form ...
前端项目实战175-ant design form清空表单
form清空表单 const handleClear = (index: any) => {form.setFieldsValue({ [`overlayLength-${index}`]: n ...
ant design pro 控制表单输入框的格式和数字
遇到一个需求,需要控制表单输入框必须只能输入0-19位的数字,且这个表单是非必填项的,发现antdesignpro可以自写验证函数 //函数部分const checkId = (_:any, v:an ...
antd 动态添加表单_react Ant Design 动态生成表单，并带验证
写点杂记,写这个文章原因是因为我对象要做这个功能,我们正好用到了特意拆写成了1个简单的demo import React, {Component} from 'react' import {conne ...
ant design form表单的时间处理
ant design form表单的时间处理用ant design开发程序时,会碰到时间的字段,效果如下: 那么该怎么处理呢? 可以在表单中使用如下代码: import { DatePicker } ...
获取form表单_【第1535期】前端 Form 的表单的一个通用解决方案
前言今日早读文章由阿里@布达投稿分享. @布达,Alibaba Fusion项目组的.花名潕量.主要专注在设计系统.组件.可视化搭建这个领域正文从这开始-- Fusion Next - Form ...
antd picker 使用如何_如何基于jsoneditor二次封装一个可实时预览的json编辑器组件?(react版)...
前言做为一名前端开发人员,掌握vue/react/angular等框架已经是必不可少的技能了,我们都知道,vue或react等MVVM框架提倡组件化开发,这样一方面可以提高组件复用性和可扩展性,另一 ...
Ant Design Blazor 组件库的路由复用多标签页介绍
前言 Blazor 是 .NET 最新的前端框架,可以基于 WebAssembly 或 SignalR (WebSocket)构建前端应用程序,基于 WebAssembly 托管模型的 Blazor ...
Java入力项目无法设定到form_html中关于form与表单提交操作的资料集合
原标题:html中关于form与表单提交操作的资料集合这里我们介绍一下form元素与表单提交方面的知识. form元素 form元素的DOM接口是HTMLFormElement,继承自HTMLEle ...

Ant Design Form组件表单实时预览

文章目录

一、应用场景

二、useWatch

三、关键代码

Ant Design Form组件表单实时预览相关推荐

最新文章

热门文章