Reactã®useFormStatusããã¯ãæ¢æ±ãããã©ãŒã 管çãå¹çåããŸããéä¿¡ç¶æ ããšã©ãŒãã³ããªã³ã°ããŠãŒã¶ãŒãšã¯ã¹ããªãšã³ã¹ã®åäžã«ã€ããŠè§£èª¬ãå®äŸãšãã¹ããã©ã¯ãã£ã¹ã玹ä»ããŸãã
React useFormStatus: ãã©ãŒã ã®ç¶æ 管çã«é¢ããå æ¬çã¬ã€ã
React 18ã§å°å
¥ãããuseFormStatusããã¯ã¯ãReactãµãŒããŒã³ã³ããŒãã³ãå
ã§ãã©ãŒã ã®éä¿¡ç¶æ
ã管çããããã®åŒ·åãã€å¹ççãªæ¹æ³ãæäŸããŸãããã®ããã¯ã¯ãµãŒããŒã¢ã¯ã·ã§ã³ãšé£æºããããã«ç¹å¥ã«èšèšãããŠããããã©ãŒã ã®éä¿¡ããµãŒããŒäžã§çŽæ¥åŠçããããã®ã·ãŒã ã¬ã¹ãªçµ±åãå®çŸããŸããããã«ããããã©ãŒã éä¿¡ã®ã¹ããŒã¿ã¹ã远跡ããããã»ã¹ãç°¡çŽ åããããã©ãŒã ãä¿çäžããæåãããããšã©ãŒãçºçããããªã©ã®è²Žéãªæ
å ±ãæäŸãããŸãããã®ã¬ã€ãã§ã¯ãuseFormStatusã®æ©èœããã®å©ç¹ãããã³æ§ã
ãªã·ããªãªã§ã®äœ¿çšæ³ã瀺ãå®è·µçãªäŸãæ¢ããŸãã
ãµãŒããŒã¢ã¯ã·ã§ã³ãšuseFormStatusã®çè§£
useFormStatusãæ·±ãçè§£ããåã«ãReactãµãŒããŒã³ã³ããŒãã³ããšãµãŒããŒã¢ã¯ã·ã§ã³ãçè§£ããããšãéèŠã§ãããµãŒããŒã¢ã¯ã·ã§ã³ã䜿çšãããšããµãŒããŒäžã§å®è¡ããã颿°ãå®çŸ©ããReactã³ã³ããŒãã³ãããçŽæ¥ã¢ã¯ã»ã¹ã§ããŸããããã«ãããå¥ã®APIãšã³ããã€ã³ããå¿
èŠãšããã«ããã©ãŒã ã®éä¿¡ãããŒã¿ååŸããã®ä»ã®ãµãŒããŒãµã€ãæäœãåŠçã§ããŸãã
ãããŠuseFormStatusããã¯ã¯ããã©ãŒã éä¿¡ã«ãã£ãŠããªã¬ãŒããããããã®ãµãŒããŒã¢ã¯ã·ã§ã³ã®å®è¡ã«é¢ããæŽå¯ãæäŸããŸãã
useFormStatusãšã¯ïŒ
useFormStatusã¯ãçŽè¿ã®ãã©ãŒã éä¿¡ã®ç¶æ
ã«é¢ããæ
å ±ãå«ããªããžã§ã¯ããè¿ãReactããã¯ã§ãããã®æ
å ±ã«ã¯ä»¥äžãå«ãŸããŸãïŒ
- pending: ãã©ãŒã ãçŸåšéä¿¡äžãã©ããã瀺ãããŒã«å€ã
- data: éä¿¡ã«é¢é£ä»ãããã
FormDataãªããžã§ã¯ãã - method: éä¿¡ã«äœ¿çšãããHTTPã¡ãœããïŒé垞㯠'POST'ïŒã
- action: ããªã¬ãŒããããµãŒããŒã¢ã¯ã·ã§ã³é¢æ°ã
useFormStatusã䜿çšããå©ç¹
useFormStatusãæŽ»çšããããšã«ã¯ãããã€ãã®äž»èŠãªå©ç¹ããããŸãïŒ
- ç¶æ 管çã®ç°¡çŽ å: ãã©ãŒã ã®éä¿¡ã¹ããŒã¿ã¹ã远跡ããããã®æåã®ç¶æ 管çãäžèŠã«ãªããŸããããã¯ã¯éä¿¡ã®é²è¡ã«åãããŠèªåçã«æŽæ°ãããŸãã
- ãŠãŒã¶ãŒãšã¯ã¹ããªãšã³ã¹ã®åäž: ãã©ãŒã åŠçäžã«ããŒãã£ã³ã°ã€ã³ãžã±ãŒã¿ãŒã衚瀺ãããã倱ææã«ãšã©ãŒã¡ãã»ãŒãžã衚瀺ããããããªã©ããªã¢ã«ã¿ã€ã ã®ãã£ãŒãããã¯ããŠãŒã¶ãŒã«æäŸããŸãã
- ã¯ãªãŒã³ãªã³ãŒã: ãã©ãŒã éä¿¡ããžãã¯ãã³ã³ããŒãã³ãã®ã¬ã³ããªã³ã°ããåé¢ããããšã§ããã宣èšçã§ä¿å®ããããã³ãŒãããŒã¹ãä¿é²ããŸãã
- ãµãŒããŒã¢ã¯ã·ã§ã³ãšã®ã·ãŒã ã¬ã¹ãªçµ±å: ãµãŒããŒã¢ã¯ã·ã§ã³ãšå®ç§ã«é£æºããããã«èšèšãããŠããããã©ãŒã éä¿¡ããµãŒããŒäžã§çŽæ¥ç°¡åã«åŠçã§ããŸãã
useFormStatusã®å®è·µçãªäŸ
æ§ã
ãªã·ããªãªã§ã®useFormStatusã®äœ¿çšæ³ã説æããããã«ãããã€ãã®å®è·µçãªäŸãèŠãŠãããŸãããã
ããŒãã£ã³ã°ã€ã³ãžã±ãŒã¿ãŒä»ãã®åºæ¬çãªãã©ãŒã éä¿¡
ãã®äŸã§ã¯ããã©ãŒã éä¿¡äžã«è¡šç€ºãããããŒãã£ã³ã°ã€ã³ãžã±ãŒã¿ãŒãæã€åçŽãªãã©ãŒã ã瀺ããŸãã
ãµãŒããŒã¢ã¯ã·ã§ã³ (actions.js):
'use server'
export async function submitForm(formData) {
// Simulate a delay to demonstrate the loading state
await new Promise(resolve => setTimeout(resolve, 2000));
const name = formData.get('name');
console.log('Form submitted with name:', name);
return { message: `Form submitted successfully with name: ${name}` };
}
Reactã³ã³ããŒãã³ã (FormComponent.jsx):
'use client'
import { useFormStatus } from 'react-dom'
import { submitForm } from './actions'
function FormComponent() {
const { pending } = useFormStatus()
return (
)
}
export default FormComponent
ãã®äŸã§ã¯ãuseFormStatusããååŸããpendingããããã£ã䜿çšããŠããã©ãŒã éä¿¡äžã«å
¥åãã£ãŒã«ããšãã¿ã³ãç¡å¹ã«ãããSubmitting...ããšããã¡ãã»ãŒãžã衚瀺ããŸãã
æåããã³ãšã©ãŒç¶æ ã®åŠç
ãã®äŸã§ã¯ããã©ãŒã éä¿¡åŸã®æåããã³ãšã©ãŒç¶æ ãåŠçããæ¹æ³ã瀺ããŸãã
ãµãŒããŒã¢ã¯ã·ã§ã³ (actions.js):
'use server'
export async function submitForm(formData) {
// Simulate a delay
await new Promise(resolve => setTimeout(resolve, 2000));
const name = formData.get('name');
if (!name) {
throw new Error('Name is required');
}
console.log('Form submitted with name:', name);
return { message: `Form submitted successfully with name: ${name}` };
}
Reactã³ã³ããŒãã³ã (FormComponent.jsx):
'use client'
import { useFormStatus } from 'react-dom'
import { submitForm } from './actions'
import { useState } from 'react'
function FormComponent() {
const { pending } = useFormStatus()
const [message, setMessage] = useState(null);
const [error, setError] = useState(null);
async function handleSubmit(formData) {
try {
const result = await submitForm(formData);
setMessage(result.message);
setError(null);
} catch (e) {
setError(e.message);
setMessage(null);
}
}
return (
)
}
export default FormComponent
ãã®äŸã§ã¯ãhandleSubmit颿°ã§try/catchãããã¯ã䜿çšãããŠããŸãããµãŒããŒã¢ã¯ã·ã§ã³ããšã©ãŒãã¹ããŒããå Žåãããããã£ããããããŠãŒã¶ãŒã«è¡šç€ºãããŸããéä¿¡ãæåãããšãæåã¡ãã»ãŒãžã衚瀺ãããŸãã
è€éãªããŒã¿ã®ããã®FormDataã®äœ¿çš
useFormStatusã¯FormDataãšã·ãŒã ã¬ã¹ã«é£æºããè€éãªããŒã¿æ§é ãç°¡åã«æ±ãããšãã§ããŸããããã§ã¯ããã¡ã€ã«ãã¢ããããŒãããæ¹æ³ã瀺ãäŸã玹ä»ããŸãã
ãµãŒããŒã¢ã¯ã·ã§ã³ (actions.js):
'use server'
export async function uploadFile(formData) {
// Simulate file processing
await new Promise(resolve => setTimeout(resolve, 2000));
const file = formData.get('file');
if (!file) {
throw new Error('No file uploaded');
}
console.log('File uploaded:', file.name);
return { message: `File uploaded successfully: ${file.name}` };
}
Reactã³ã³ããŒãã³ã (FormComponent.jsx):
'use client'
import { useFormStatus } from 'react-dom'
import { uploadFile } from './actions'
import { useState } from 'react'
function FormComponent() {
const { pending } = useFormStatus()
const [message, setMessage] = useState(null);
const [error, setError] = useState(null);
async function handleSubmit(formData) {
try {
const result = await uploadFile(formData);
setMessage(result.message);
setError(null);
} catch (e) {
setError(e.message);
setMessage(null);
}
}
return (
)
}
export default FormComponent
ãã®äŸã§ã¯ãFormDataã䜿çšããŠãã¡ã€ã«ã®ã¢ããããŒããåŠçããæ¹æ³ã瀺ããŠããŸãããµãŒããŒã¢ã¯ã·ã§ã³ã¯FormDataãªããžã§ã¯ããããã¡ã€ã«ãååŸãããããåŠçããŸããuseFormStatusããã¯ã¯ããã¡ã€ã«ã®ã¢ããããŒãäžã®ããŒãã£ã³ã°ç¶æ
ã管çããŸãã
useFormStatusã䜿çšããããã®ãã¹ããã©ã¯ãã£ã¹
useFormStatusã®å©ç¹ãæå€§éã«æŽ»çšããããã«ã以äžã®ãã¹ããã©ã¯ãã£ã¹ãæ€èšããŠãã ããïŒ
- æç¢ºãªãŠãŒã¶ãŒãã£ãŒãããã¯ã®æäŸ:
pendingç¶æ ã䜿çšããŠãæ å ±æäŸçãªããŒãã£ã³ã°ã€ã³ãžã±ãŒã¿ãŒã衚瀺ãããã©ãŒã èŠçŽ ãç¡å¹ã«ããŠè€æ°åã®éä¿¡ãé²ããŸãã - ãšã©ãŒã®äžå¯§ãªåŠç: ãµãŒããŒã¢ã¯ã·ã§ã³ã§äŸå€ããã£ãããããŠãŒã¶ãŒãã¬ã³ããªãŒãªãšã©ãŒã¡ãã»ãŒãžã衚瀺ããããã®ãšã©ãŒãã³ããªã³ã°ãå®è£ ããŸãã
- ãµãŒããŒã§ã®ããŒã¿æ€èšŒ: ããŒã¿ã®æŽåæ§ãšã»ãã¥ãªãã£ã確ä¿ããããã«ããµãŒããŒãµã€ãã®æ€èšŒãå®è¡ããŸãã
- ãµãŒããŒã¢ã¯ã·ã§ã³ãç°¡æœã«ä¿ã€: ãµãŒããŒã¢ã¯ã·ã§ã³ãç¹å®ã®ã¿ã¹ã¯ã«éäžãããããšã§ãããã©ãŒãã³ã¹ãšä¿å®æ§ãåäžãããŸãã
- ã¢ã¯ã»ã·ããªãã£ã®èæ ®: é©åãªã©ãã«ãARIA屿§ãããŒããŒãããã²ãŒã·ã§ã³ã®ãµããŒããæäŸããããšã§ããã©ãŒã ãã¢ã¯ã»ã·ãã«ã§ããããšã確èªããŸãã
é«åºŠãªäœ¿çšäŸ
åºæ¬çãªäŸãè¶
ããŠãuseFormStatusã¯ããè€éãªã·ããªãªã§äœ¿çšã§ããŸãïŒ
- ããã°ã¬ãã·ããšã³ãã³ã¹ã¡ã³ã: ãµãŒããŒã¢ã¯ã·ã§ã³ãš
useFormStatusã䜿çšããŠãã©ãŒã ãæ®µéçã«åŒ·åããJavaScriptãç¡å¹ãªãŠãŒã¶ãŒã«ã¯åºæ¬çãªäœéšããJavaScriptãæå¹ãªãŠãŒã¶ãŒã«ã¯ãããªãããªäœéšãæäŸããŸãã - ãªããã£ãã¹ãã£ãã¯æŽæ°: ãã©ãŒã ãéä¿¡ãããçŽåŸã«UIãæŽæ°ããããšã§ããªããã£ãã¹ãã£ãã¯æŽæ°ãå®è£ ããŸããéä¿¡ãæåãããšä»®å®ãã倱æããå Žåã¯æŽæ°ãå ã«æ»ããŸãã
- ãã©ãŒã ã©ã€ãã©ãªãšã®çµ±å:
useFormStatusãFormikãReact Hook Formãªã©ã®äººæ°ã®ãããã©ãŒã ã©ã€ãã©ãªãšçµ±åããŠããã©ãŒã ã®ç¶æ ãšæ€èšŒã管çããŸãããããã®ã©ã€ãã©ãªã¯ç¬èªã®ã¹ããŒã管çãæã€ããšãå€ãã§ãããuseFormStatusã¯ãµãŒããŒã¢ã¯ã·ã§ã³ãžã®æçµçãªéä¿¡ãã§ãŒãºã§åœ¹ç«ã¡ãŸãã
åœéåïŒi18nïŒã«é¢ããèæ ®äºé
ã°ããŒãã«ãªãªãŒãã£ãšã³ã¹åãã«ãã©ãŒã ãæ§ç¯ããå ŽåãåœéåïŒi18nïŒã¯éåžžã«éèŠã§ããuseFormStatusã䜿çšããéã«i18nãèæ
®ããæ¹æ³ã¯æ¬¡ã®ãšããã§ãïŒ
- ããŒã«ã©ã€ãºããããšã©ãŒã¡ãã»ãŒãž: ãŠãŒã¶ãŒã«è¡šç€ºããããšã©ãŒã¡ãã»ãŒãžãã圌ãã®åªå
èšèªã«ããŒã«ã©ã€ãºãããŠããããšã確èªããŸããããã¯ããšã©ãŒã¡ãã»ãŒãžã翻蚳ãã¡ã€ã«ã«ä¿åãã
react-intlãi18nextã®ãããªã©ã€ãã©ãªã䜿çšããŠé©åãªç¿»èš³ãååŸããããšã§å®çŸã§ããŸãã - æ¥ä»ãšæ°å€ã®ãã©ãŒããã: ãŠãŒã¶ãŒã®ãã±ãŒã«ã«å¿ããŠæ¥ä»ãšæ°å€ã®ãã©ãŒããããåŠçããŸãã
Intl.DateTimeFormatãIntl.NumberFormatã®ãããªã©ã€ãã©ãªã䜿çšããŠããããã®å€ãæ£ãããã©ãŒãããããŸãã - å³ããå·ŠïŒRTLïŒãžã®ãµããŒã: ã¢ããªã±ãŒã·ã§ã³ãå³ããå·Šã«æžãããèšèªïŒäŸïŒã¢ã©ãã¢èªãããã©ã€èªïŒããµããŒãããå Žåããã©ãŒã ãRTLã¬ã€ã¢ãŠãã«å¯Ÿå¿ããããã«é©åã«ã¹ã¿ã€ã«èšå®ãããŠããããšã確èªããŸãã
- ãã©ãŒã ã®æ€èšŒ: ãã©ãŒã ã®æ€èšŒã«ãŒã«ãç°ãªããã±ãŒã«ã«åãããŠèª¿æŽããŸããäŸãã°ãé»è©±çªå·ã®æ€èšŒã¯åœã«ãã£ãŠå€§ããç°ãªãå ŽåããããŸãã
ããŒã«ã©ã€ãºããããšã©ãŒã¡ãã»ãŒãžã®äŸ:
// translations/ja.json
{
"form.error.nameRequired": "ååãå
¥åããŠãã ããã",
"form.success.submission": "ãæåºããããšãããããŸãïŒ"
}
// translations/fr.json
{
"form.error.nameRequired": "Veuillez entrer votre nom.",
"form.success.submission": "Merci pour votre soumission !"
}
// react-intl ã䜿çšããã³ã³ããŒãã³ã
import { useIntl } from 'react-intl';
function FormComponent() {
const intl = useIntl();
const [error, setError] = useState(null);
// ...
catch (e) {
setError(intl.formatMessage({ id: 'form.error.nameRequired' }));
}
}
ã¢ã¯ã»ã·ããªãã£ã«é¢ããèæ ®äºé
ã¢ã¯ã»ã·ããªãã£ã¯ãå
æ¬çãªãŠã§ãã¢ããªã±ãŒã·ã§ã³ãæ§ç¯ããäžã§éèŠãªåŽé¢ã§ããuseFormStatusã䜿çšããéã«å¿ã«çããŠããã¹ãã¢ã¯ã»ã·ããªãã£ã®èæ
®äºé
ã¯æ¬¡ã®ãšããã§ãïŒ
- ARIA屿§: ARIA屿§ã䜿çšããŠãæ¯æŽæè¡ã«ãã©ãŒã ã®ç¶æ
ã«é¢ããæ
å ±ãæäŸããŸããäŸãã°ããã©ãŒã ãä¿çäžã®éãéä¿¡ãã¿ã³ã«
aria-busy="true"ã䜿çšããŸãã - ã©ãã«: ãã¹ãŠã®ãã©ãŒã ãã£ãŒã«ãã«ã
<label>èŠçŽ ã䜿çšããŠå ¥åèŠçŽ ã«é¢é£ä»ãããããæç¢ºã§èª¬æçãªã©ãã«ãããããšã確èªããŸãã - ãšã©ãŒã¡ãã»ãŒãž: é害ãæã€ãŠãŒã¶ãŒã容æã«æ°ã¥ããçè§£ã§ããæ¹æ³ã§ãšã©ãŒã¡ãã»ãŒãžã衚瀺ããŸããã¹ã¯ãªãŒã³ãªãŒããŒã«ãšã©ãŒã¡ãã»ãŒãžãã¢ããŠã³ã¹ããããã«ã
aria-live="assertive"ã®ãããªARIA屿§ã䜿çšããŸãã - ããŒããŒãããã²ãŒã·ã§ã³: ãŠãŒã¶ãŒãããŒããŒãã ãã§ãã©ãŒã ãããã²ãŒãã§ããããšã確èªããŸãã
tabindex屿§ã䜿çšããŠãèŠçŽ ããã©ãŒã«ã¹ãåãåãé åºãå¶åŸ¡ããŸãã - è²ã®ã³ã³ãã©ã¹ã: ãã©ãŒã ã§äœ¿çšãããããã¹ããšèæ¯è²ããèŠèŠé害ãæã€ãŠãŒã¶ãŒã容æã«èªããããã«ååãªã³ã³ãã©ã¹ããæã£ãŠããããšã確èªããŸãã
useFormStatusãšåŸæ¥ã®ã¹ããŒã管çã®æ¯èŒ
åŸæ¥ãReactéçºè
ã¯ã³ã³ããŒãã³ãã®ç¶æ
ïŒuseStateïŒãããè€éãªç¶æ
管çã©ã€ãã©ãªïŒäŸïŒReduxãZustandïŒã䜿çšããŠãã©ãŒã ã®éä¿¡ç¶æ
ã管çããŠããŸããããããã®ã¢ãããŒããšuseFormStatusã®æ¯èŒã¯æ¬¡ã®ãšããã§ãïŒ
| æ©èœ | useFormStatus | useState | å€éšã¹ããŒã管ç |
|---|---|---|---|
| è€éã | äœ | äž | é« |
| ãµãŒããŒã¢ã¯ã·ã§ã³ãšã®çµ±å | ã·ãŒã ã¬ã¹ | æåã§ã®çµ±åãå¿ èŠ | æåã§ã®çµ±åãå¿ èŠ |
| ãã€ã©ãŒãã¬ãŒãã³ãŒã | æå°é | äžçšåºŠ | ããªãå€ã |
| é©ãããŠãŒã¹ã±ãŒã¹ | ãµãŒããŒã¢ã¯ã·ã§ã³ã«çŽæ¥éä¿¡ãããã©ãŒã | ç¶æ ãéãããåçŽãªãã©ãŒã | ã³ã³ããŒãã³ãéã§ç¶æ ãå ±æããè€éãªãã©ãŒã |
useFormStatusã¯ããã©ãŒã ãReactãµãŒããŒã¢ã¯ã·ã§ã³ãšçŽæ¥ããåãããå Žåã«ç¹ã«åšåãçºæ®ããŸãããã€ã©ãŒãã¬ãŒããåæžããããã»ã¹ãç°¡çŽ åããŸãããã ããè€æ°ã®ã³ã³ããŒãã³ãéã§ç¶æ
ãå
±æããéåžžã«è€éãªãã©ãŒã ã®å Žåã¯ãæ¬æ Œçãªç¶æ
管çã©ã€ãã©ãªãäŸç¶ãšããŠåŠ¥åœãããããŸããã
äžè¬çãªåé¡ã®ãã©ãã«ã·ã¥ãŒãã£ã³ã°
useFormStatusã䜿çšããéã«ééããå¯èœæ§ã®ããäžè¬çãªåé¡ãšããã®ãã©ãã«ã·ã¥ãŒãã£ã³ã°æ¹æ³ã¯æ¬¡ã®ãšããã§ãïŒ
useFormStatusãæŽæ°ãããªãïŒactionããããããµãŒããŒã¢ã¯ã·ã§ã³ã«èšå®ãããŠãã<form>èŠçŽ å ã§useFormStatusã䜿çšããŠããããšã確èªããŠãã ããã- ãµãŒããŒã¢ã¯ã·ã§ã³ãæ£ããå®çŸ©ããããšã¯ã¹ããŒããããŠããããšã確èªããŠãã ããã
- ãµãŒããŒã¢ã¯ã·ã§ã³ãæ£åžžã«å®äºããã®ã劚ããŠããå¯èœæ§ã®ãããšã©ãŒããªãã確èªããŠãã ããã
- ãšã©ãŒã¡ãã»ãŒãžã衚瀺ãããªãïŒ
- ãµãŒããŒã¢ã¯ã·ã§ã³ã§ãšã©ãŒãæ£ãããã£ãããããšã©ãŒã¡ãã»ãŒãžãè¿ããŠããããšã確èªããŠãã ããã
- ã³ã³ããŒãã³ãã§
errorç¶æ ã䜿çšããŠãšã©ãŒã¡ãã»ãŒãžã衚瀺ããŠããããšã確èªããŠãã ããã
- ããŒãã£ã³ã°ã€ã³ãžã±ãŒã¿ãŒã衚瀺ãããªãïŒ
useFormStatusã®pendingç¶æ ã䜿çšããŠãæ¡ä»¶ä»ãã§ããŒãã£ã³ã°ã€ã³ãžã±ãŒã¿ãŒã衚瀺ããŠããããšã確èªããŠãã ããã- ãµãŒããŒã¢ã¯ã·ã§ã³ãå®éã«å®äºãããŸã§ã«æéãããã£ãŠããããšïŒäŸïŒé å»¶ãã·ãã¥ã¬ãŒããããªã©ïŒã確èªããŠãã ããã
çµè«
useFormStatusã¯ããµãŒããŒã³ã³ããŒãã³ãã䜿çšããReactã¢ããªã±ãŒã·ã§ã³ã§ãã©ãŒã ã®éä¿¡ç¶æ
ã管çããããã®ã¯ãªãŒã³ã§å¹ççãªæ¹æ³ãæäŸããŸãããã®ããã¯ã掻çšããããšã§ãã³ãŒããç°¡çŽ åãããŠãŒã¶ãŒãšã¯ã¹ããªãšã³ã¹ãåäžããããµãŒããŒã¢ã¯ã·ã§ã³ãšã·ãŒã ã¬ã¹ã«çµ±åã§ããŸãããã®ã¬ã€ãã§ã¯ãuseFormStatusã®åºæ¬ãå®è·µçãªäŸããããŠå¹æçã«äœ¿çšããããã®ãã¹ããã©ã¯ãã£ã¹ã«ã€ããŠèª¬æããŸãããuseFormStatusãReactãããžã§ã¯ãã«çµã¿èŸŒãããšã§ããã©ãŒã åŠçãå¹çåããã°ããŒãã«ãªãªãŒãã£ãšã³ã¹åãã«ãããå
ç¢ã§ãŠãŒã¶ãŒãã¬ã³ããªãŒãªã¢ããªã±ãŒã·ã§ã³ãæ§ç¯ã§ããŸãã