feat: support selector (#46180)

* feat: support selector

* fix: ts text

* feat: md

* feat: snap
This commit is contained in:
叶枫 2023-11-30 17:34:50 +08:00 committed by GitHub
parent e6bf2e24a6
commit f5e0408649
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
6 changed files with 16 additions and 3 deletions

View File

@ -19514,6 +19514,9 @@ Array [
<pre> <pre>
Name Value: Name Value:
</pre> </pre>
<pre>
Custom Value: name:
</pre>
</article>, </article>,
] ]
`; `;

View File

@ -8256,6 +8256,9 @@ Array [
<pre> <pre>
Name Value: Name Value:
</pre> </pre>
<pre>
Custom Value:
</pre>
</article>, </article>,
] ]
`; `;

View File

@ -4,6 +4,8 @@ import { Form, Input, InputNumber, Typography } from 'antd';
const Demo: React.FC = () => { const Demo: React.FC = () => {
const [form] = Form.useForm<{ name: string; age: number }>(); const [form] = Form.useForm<{ name: string; age: number }>();
const nameValue = Form.useWatch('name', form); 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 ( return (
<> <>
@ -18,6 +20,7 @@ const Demo: React.FC = () => {
<Typography> <Typography>
<pre>Name Value: {nameValue}</pre> <pre>Name Value: {nameValue}</pre>
<pre>Custom Value: {customValue}</pre>
</Typography> </Typography>
</> </>
); );

View File

@ -387,7 +387,9 @@ export default () => {
### Form.useWatch ### Form.useWatch
`type Form.useWatch = (namePath: NamePath, formInstance?: FormInstance | WatchOptions): Value` `type Form.useWatch = (namePath: NamePath | (selector: (values: Store) => any), formInstance?: FormInstance | WatchOptions): Value`
`5.12.0` add `selector`
Watch the value of a field. You can use this to interact with other hooks like `useSWR` to reduce development costs: Watch the value of a field. You can use this to interact with other hooks like `useSWR` to reduce development costs:

View File

@ -386,7 +386,9 @@ export default () => {
### Form.useWatch ### Form.useWatch
`type Form.useWatch = (namePath: NamePath, formInstance?: FormInstance | WatchOptions): Value` `type Form.useWatch = (namePath: NamePath | (selector: (values: Store)) => any, formInstance?: FormInstance | WatchOptions): Value`
`5.12.0` 新增 `selector`
用于直接获取 form 中字段对应的值。通过该 Hooks 可以与诸如 `useSWR` 进行联动从而降低维护成本: 用于直接获取 form 中字段对应的值。通过该 Hooks 可以与诸如 `useSWR` 进行联动从而降低维护成本:

View File

@ -132,7 +132,7 @@
"rc-dialog": "~9.3.4", "rc-dialog": "~9.3.4",
"rc-drawer": "~6.5.2", "rc-drawer": "~6.5.2",
"rc-dropdown": "~4.1.0", "rc-dropdown": "~4.1.0",
"rc-field-form": "~1.40.0", "rc-field-form": "~1.41.0",
"rc-image": "~7.5.1", "rc-image": "~7.5.1",
"rc-input": "~1.3.6", "rc-input": "~1.3.6",
"rc-input-number": "~8.4.0", "rc-input-number": "~8.4.0",