mirror of
https://github.com/ant-design/ant-design.git
synced 2024-12-13 07:39:10 +08:00
f5e0408649
* feat: support selector * fix: ts text * feat: md * feat: snap
30 lines
856 B
TypeScript
30 lines
856 B
TypeScript
import React from 'react';
|
|
import { Form, Input, InputNumber, Typography } from 'antd';
|
|
|
|
const Demo: React.FC = () => {
|
|
const [form] = Form.useForm<{ name: string; age: number }>();
|
|
const nameValue = Form.useWatch('name', form);
|
|
// The selector is static and does not support closures.
|
|
const customValue = Form.useWatch((values) => `name: ${values.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>
|
|
<pre>Custom Value: {customValue}</pre>
|
|
</Typography>
|
|
</>
|
|
);
|
|
};
|
|
|
|
export default Demo;
|