mirror of
https://gitee.com/ant-design/ant-design.git
synced 2024-11-30 02:59:04 +08:00
feat: Form support useWatch (#35036)
* feat: Support useWatch * test: update test case * chore: update snapshot
This commit is contained in:
二货机器人
GitHub
parent
cfc0530e3b
commit
b62e409ad5
@ -1,7 +1,7 @@
|
||||
import * as React from 'react';
|
||||
import { useMemo } from 'react';
|
||||
import classNames from 'classnames';
|
||||
import FieldForm, { List } from 'rc-field-form';
|
||||
import FieldForm, { List, useWatch } from 'rc-field-form';
|
||||
import { FormProps as RcFormProps } from 'rc-field-form/lib/Form';
|
||||
import { ValidateErrorEntity } from 'rc-field-form/lib/interface';
|
||||
import { Options } from 'scroll-into-view-if-needed';
|
||||
@ -140,6 +140,6 @@ const Form = React.forwardRef<FormInstance, FormProps>(InternalForm) as <Values
|
||||
props: React.PropsWithChildren<FormProps<Values>> & { ref?: React.Ref<FormInstance<Values>> },
|
||||
) => React.ReactElement;
|
||||
|
||||
export { useForm, List, FormInstance };
|
||||
export { useForm, List, FormInstance, useWatch };
|
||||
|
||||
export default Form;
|
||||
|
||||
@ -14850,6 +14850,89 @@ exports[`renders ./components/form/demo/time-related-controls.md extend context
|
||||
</form>
|
||||
`;
|
||||
|
||||
exports[`renders ./components/form/demo/useWatch.md extend context correctly 1`] = `
|
||||
Array [
|
||||
<form
|
||||
autocomplete="off"
|
||||
class="ant-form ant-form-vertical"
|
||||
>
|
||||
<div
|
||||
class="ant-row ant-form-item"
|
||||
>
|
||||
<div
|
||||
class="ant-col ant-form-item-label"
|
||||
>
|
||||
<label
|
||||
class=""
|
||||
for="field1"
|
||||
title="Field 1 (Watch to trigger rerender)"
|
||||
>
|
||||
Field 1 (Watch to trigger rerender)
|
||||
</label>
|
||||
</div>
|
||||
<div
|
||||
class="ant-col ant-form-item-control"
|
||||
>
|
||||
<div
|
||||
class="ant-form-item-control-input"
|
||||
>
|
||||
<div
|
||||
class="ant-form-item-control-input-content"
|
||||
>
|
||||
<input
|
||||
class="ant-input"
|
||||
id="field1"
|
||||
type="text"
|
||||
value=""
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="ant-row ant-form-item"
|
||||
>
|
||||
<div
|
||||
class="ant-col ant-form-item-label"
|
||||
>
|
||||
<label
|
||||
class=""
|
||||
for="field2"
|
||||
title="Field 2 (Not Watch)"
|
||||
>
|
||||
Field 2 (Not Watch)
|
||||
</label>
|
||||
</div>
|
||||
<div
|
||||
class="ant-col ant-form-item-control"
|
||||
>
|
||||
<div
|
||||
class="ant-form-item-control-input"
|
||||
>
|
||||
<div
|
||||
class="ant-form-item-control-input-content"
|
||||
>
|
||||
<input
|
||||
class="ant-input"
|
||||
id="field2"
|
||||
type="text"
|
||||
value=""
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</form>,
|
||||
<article
|
||||
class="ant-typography"
|
||||
>
|
||||
<pre>
|
||||
Field 1 Value:
|
||||
</pre>
|
||||
</article>,
|
||||
]
|
||||
`;
|
||||
|
||||
exports[`renders ./components/form/demo/validate-other.md extend context correctly 1`] = `
|
||||
<form
|
||||
class="ant-form ant-form-horizontal"
|
||||
|
||||
@ -6098,6 +6098,89 @@ exports[`renders ./components/form/demo/time-related-controls.md correctly 1`] =
|
||||
</form>
|
||||
`;
|
||||
|
||||
exports[`renders ./components/form/demo/useWatch.md correctly 1`] = `
|
||||
Array [
|
||||
<form
|
||||
autocomplete="off"
|
||||
class="ant-form ant-form-vertical"
|
||||
>
|
||||
<div
|
||||
class="ant-row ant-form-item"
|
||||
>
|
||||
<div
|
||||
class="ant-col ant-form-item-label"
|
||||
>
|
||||
<label
|
||||
class=""
|
||||
for="field1"
|
||||
title="Field 1 (Watch to trigger rerender)"
|
||||
>
|
||||
Field 1 (Watch to trigger rerender)
|
||||
</label>
|
||||
</div>
|
||||
<div
|
||||
class="ant-col ant-form-item-control"
|
||||
>
|
||||
<div
|
||||
class="ant-form-item-control-input"
|
||||
>
|
||||
<div
|
||||
class="ant-form-item-control-input-content"
|
||||
>
|
||||
<input
|
||||
class="ant-input"
|
||||
id="field1"
|
||||
type="text"
|
||||
value=""
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="ant-row ant-form-item"
|
||||
>
|
||||
<div
|
||||
class="ant-col ant-form-item-label"
|
||||
>
|
||||
<label
|
||||
class=""
|
||||
for="field2"
|
||||
title="Field 2 (Not Watch)"
|
||||
>
|
||||
Field 2 (Not Watch)
|
||||
</label>
|
||||
</div>
|
||||
<div
|
||||
class="ant-col ant-form-item-control"
|
||||
>
|
||||
<div
|
||||
class="ant-form-item-control-input"
|
||||
>
|
||||
<div
|
||||
class="ant-form-item-control-input-content"
|
||||
>
|
||||
<input
|
||||
class="ant-input"
|
||||
id="field2"
|
||||
type="text"
|
||||
value=""
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</form>,
|
||||
<article
|
||||
class="ant-typography"
|
||||
>
|
||||
<pre>
|
||||
Field 1 Value:
|
||||
</pre>
|
||||
</article>,
|
||||
]
|
||||
`;
|
||||
|
||||
exports[`renders ./components/form/demo/validate-other.md correctly 1`] = `
|
||||
<form
|
||||
class="ant-form ant-form-horizontal"
|
||||
|
||||
44
components/form/demo/useWatch.md
Normal file
44
components/form/demo/useWatch.md
Normal file
@ -0,0 +1,44 @@
|
||||
---
|
||||
order: 3.3
|
||||
version: 4.20.0
|
||||
title:
|
||||
zh-CN: 字段监听 Hooks
|
||||
en-US: Watch Hooks
|
||||
---
|
||||
|
||||
## zh-CN
|
||||
|
||||
`useWatch` 允许你监听字段变化，同时仅当改字段变化时重新渲染。
|
||||
|
||||
## en-US
|
||||
|
||||
`useWatch` helps watch the field change and only re-render for the value change.
|
||||
|
||||
```tsx
|
||||
import React from 'react';
|
||||
import { Form, Input, Typography } from 'antd';
|
||||
|
||||
const Demo = () => {
|
||||
const [form] = Form.useForm<{ field1: string; field2: string }>();
|
||||
const nameValue = Form.useWatch(['field1'], form);
|
||||
|
||||
return (
|
||||
<>
|
||||
<Form form={form} layout="vertical" autoComplete="off">
|
||||
<Form.Item name="field1" label="Field 1 (Watch to trigger rerender)">
|
||||
<Input />
|
||||
</Form.Item>
|
||||
<Form.Item name="field2" label="Field 2 (Not Watch)">
|
||||
<Input />
|
||||
</Form.Item>
|
||||
</Form>
|
||||
|
||||
<Typography>
|
||||
<pre>Field 1 Value: {nameValue}</pre>
|
||||
</Typography>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default Demo;
|
||||
```
|
||||
@ -1,5 +1,5 @@
|
||||
import { Rule, RuleObject, RuleRender } from 'rc-field-form/lib/interface';
|
||||
import InternalForm, { useForm, FormInstance, FormProps } from './Form';
|
||||
import InternalForm, { useForm, FormInstance, FormProps, useWatch } from './Form';
|
||||
import Item, { FormItemProps } from './FormItem';
|
||||
import ErrorList, { ErrorListProps } from './ErrorList';
|
||||
import List, { FormListProps } from './FormList';
|
||||
@ -10,6 +10,7 @@ type InternalFormType = typeof InternalForm;
|
||||
|
||||
interface FormInterface extends InternalFormType {
|
||||
useForm: typeof useForm;
|
||||
useWatch: typeof useWatch;
|
||||
Item: typeof Item;
|
||||
List: typeof List;
|
||||
ErrorList: typeof ErrorList;
|
||||
@ -25,6 +26,7 @@ Form.Item = Item;
|
||||
Form.List = List;
|
||||
Form.ErrorList = ErrorList;
|
||||
Form.useForm = useForm;
|
||||
Form.useWatch = useWatch;
|
||||
Form.Provider = FormProvider;
|
||||
Form.create = () => {
|
||||
devWarning(
|
||||
|
||||
@ -129,7 +129,7 @@
|
||||
"rc-dialog": "~8.7.0",
|
||||
"rc-drawer": "~4.4.2",
|
||||
"rc-dropdown": "~3.4.0",
|
||||
"rc-field-form": "~1.25.0",
|
||||
"rc-field-form": "~1.26.1",
|
||||
"rc-image": "~5.4.0",
|
||||
"rc-input": "~0.0.1-alpha.5",
|
||||
"rc-input-number": "~7.3.0",
|
||||
|
||||
Loading…
Reference in New Issue
Block a user