本篇文章主要是關于如何采用Form useWatch Hooks實現表單實時預覽效果

文章目錄

• 一、應用場景
• 二、useWatch
• 三、關鍵代碼

---

一、應用場景

使用的場景主要來源于工作或者我們具體的項目需求，比如當需要邊填寫表單并實現邊預覽可以采用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组件表单实时预览的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。