Movatterモバイル変換


[0]ホーム

URL:


Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

Sign up
Appearance settings

Commit51a861b

Browse files
authored
feat: useWatch compute prop (#1145)
* feat: useWatch compute prop* update format* update lint
1 parentbff10cf commit51a861b

File tree

3 files changed

+13
-11
lines changed

3 files changed

+13
-11
lines changed

‎src/components/sponsorsList.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,7 @@ export function SponsorsList() {
2121
target="_blank"
2222
rel="noopener noreferrer"
2323
>
24-
<imgsrc="/images/route4me.png"alt="route4me"/>
24+
<imgsrc="/images/route4me.png"alt="route4me"/>
2525
</a>
2626
<a
2727
href="https://www.follower24.de/"

‎src/content/docs/usewatch.mdx‎

Lines changed: 8 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -12,13 +12,14 @@ Behaves similarly to the `watch` API, however, this will isolate re-rendering at
1212

1313
---
1414

15-
| Name| Type| Description|
16-
| --------------| ----------------------------------------------------| -----------------------------------------------------------------------------------------------------------------------------------------------------------|
17-
|`name`| <TypeText>string\| string[]\| undefined</TypeText>| Name of the field.|
18-
|`control`| <TypeText>Object</TypeText>|[`control`](/docs/useform/control) object provided by`useForm`. It's optional if you are using`FormProvider`.|
19-
|`defaultValue`| <TypeText>unknown</TypeText>| default value for`useWatch` to return before the initial render.<br/><br/>**Note:** the first render will always return`defaultValue` when it's supplied.|
20-
|`disabled`| <TypeText>boolean = false</TypeText>| Option to disable the subscription.|
21-
|`exact`| <TypeText>boolean = false</TypeText>| This prop will enable an exact match for input name subscriptions.|
15+
| Name| Type| Description|
16+
| --------------| ----------------------------------------------------| ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
17+
|`name`| <TypeText>string\| string[]\| undefined</TypeText>| Name of the field.|
18+
|`control`| <TypeText>Object</TypeText>|[`control`](/docs/useform/control) object provided by`useForm`. It's optional if you are using`FormProvider`.|
19+
|`compute`| <TypeText>function</TypeText>| <p>Subscribe to selective and computed form values.</p><ul><li>Subscribe to the entire form but only return updated value with certain condition<CodeAreawithOutCopyrawData={`const watchedValue = useWatch({\n compute: (data: FormValue) => {\n if (data.test?.length) return data.test;\n\n return '';\n },\n});`}/></li><li>Subscribe to a specific form value state<CodeAreawithOutCopyrawData={`const watchedValue = useWatch({\n name: 'test',\n compute: (data: string) => {\n return data.length ? data : '';\n },\n});`}/></li></ul>|
20+
|`defaultValue`| <TypeText>unknown</TypeText>| default value for`useWatch` to return before the initial render.<br/><br/>**Note:** the first render will always return`defaultValue` when it's supplied.|
21+
|`disabled`| <TypeText>boolean = false</TypeText>| Option to disable the subscription.|
22+
|`exact`| <TypeText>boolean = false</TypeText>| This prop will enable an exact match for input name subscriptions.|
2223

2324
###Return
2425

‎src/content/ts.mdx‎

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -96,12 +96,13 @@ type FormValues = {
9696
exportdefaultfunction App() {
9797
const { register, handleSubmit }=useForm<FormValues>()
9898
const onSubmit:SubmitHandler<FormValues>= (data)=>console.log(data)
99-
const onError:SubmitErrorHandler<FormValues>= (errors)=>console.log(errors);
99+
const onError:SubmitErrorHandler<FormValues>= (errors)=>
100+
console.log(errors)
100101

101102
return (
102103
<formonSubmit={handleSubmit(onSubmit,onError)}>
103-
<input{...register("firstName"), { required:true }} />
104-
<input{...register("lastName"), { minLength:2 }} />
104+
<input{...(register("firstName"), { required:true })} />
105+
<input{...(register("lastName"), { minLength:2 })} />
105106
<inputtype="email"{...register("email")} />
106107

107108
<inputtype="submit" />

0 commit comments

Comments
 (0)

[8]ページ先頭

©2009-2025 Movatter.jp