Reactã®experimental_useFormStatusããã¯ã掻çšããŠããã©ãŒã ã®ç¶æ 管çãå¹çåããŸããããå®è£ ãå©ç¹ãå®äŸãçšããé«åºŠãªäœ¿çšæ³ãåŠã³ãŸãã
React experimental_useFormStatus å®è£ : ãã©ãŒã ç¶æ 管çã®åŒ·å
Reactã®é²åãç¶ããç¶æ³ã¯ãéçºè
ã®ãšã¯ã¹ããªãšã³ã¹ãšã¢ããªã±ãŒã·ã§ã³ã®ããã©ãŒãã³ã¹ãåäžãããããã®ããŒã«ãšãã¯ããã¯ãç¶ç¶çã«å°å
¥ããŠããŸãããã®ãããªå®éšçãªæ©èœã®1ã€ããexperimental_useFormStatusããã¯ã§ãããç¹ã«ãµãŒããŒã¢ã¯ã·ã§ã³ãšããã°ã¬ãã·ããšã³ãã³ã¹ã¡ã³ãã®ã·ããªãªã«ãããŠããã©ãŒã ã®ç¶æ
管çãç°¡çŽ åããããã«èšèšãããŠããŸãããã®å
æ¬çãªã¬ã€ãã§ã¯ãexperimental_useFormStatusããã¯ã«ã€ããŠè©³ãã説æãããã®å¹æçãªæŽ»çšæ³ã«é¢ããå®è·µçãªäŸãšæŽå¯ãæäŸããŸãã
experimental_useFormStatusãšã¯äœã§ããïŒ
experimental_useFormStatusããã¯ã¯ãReactããŒã ã«ãã£ãŠå°å
¥ãããå®éšçAPIã§ããããã©ãŒã éä¿¡ã®ç¶æ
ãããçŽæ¥çã«è¿œè·¡ããæ¹æ³ãæäŸããŸããç¹ã«ãµãŒããŒã¢ã¯ã·ã§ã³ã䜿çšããå Žåã«åœ¹ç«ã¡ãŸãããã®ããã¯ãç»å Žããåã¯ããã©ãŒã ã®ããŸããŸãªç¶æ
ïŒã¢ã€ãã«ãéä¿¡äžãæåããšã©ãŒïŒã管çããã«ã¯ãè€éãªç¶æ
管çããžãã¯ãå¿
èŠã«ãªãããšããããããŸãããexperimental_useFormStatusã¯ããã®è€éãã®å€ããæœè±¡åãããã©ãŒã éä¿¡ã®ç¶æ
ãç£èŠããããã«å¯Ÿå¿ããããã®ã·ã³ãã«ãã€å¹ççãªæ¹æ³ãæäŸããããšãç®çãšããŠããŸãã
äž»ãªå©ç¹ïŒ
- ç°¡çŽ åãããç¶æ 管çïŒãã©ãŒã éä¿¡ã®ç¶æ ã管çããããã«å¿ èŠãªãã€ã©ãŒãã¬ãŒãã³ãŒããåæžããŸãã
- 匷åããããŠãŒã¶ãŒãšã¯ã¹ããªãšã³ã¹ïŒãã©ãŒã ã®ç¶æ ã«åºã¥ããŠãããå¿çæ§ã®é«ãUIã¢ããããŒããå¯èœã«ããŸãã
- æ¹åãããã³ãŒãã®å¯èªæ§ïŒãã©ãŒã é¢é£ã®ã³ãŒããçè§£ãããããä¿å®ããããããŸãã
- ãµãŒããŒã¢ã¯ã·ã§ã³ãšã®ã·ãŒã ã¬ã¹ãªçµ±åïŒReactãµãŒããŒã³ã³ããŒãã³ãããã³ãµãŒããŒã¢ã¯ã·ã§ã³ãšããŸã飿ºããããã«èšèšãããŠããŸãã
åºæ¬çãªå®è£
experimental_useFormStatusã®åºæ¬çãªå®è£
ã説æããããã«ãç°¡åãªåãåãããã©ãŒã ã®äŸãèããŠã¿ãŸãããããã®ãã©ãŒã ã¯ããŠãŒã¶ãŒã®ååãã¡ãŒã«ã¢ãã¬ã¹ãã¡ãã»ãŒãžãåéãããµãŒããŒã¢ã¯ã·ã§ã³ã䜿çšããŠéä¿¡ããŸãã
åææ¡ä»¶
ã³ãŒãã«å ¥ãåã«ã以äžã䜿çšããŠReactãããžã§ã¯ããã»ããã¢ãããããŠããããšã確èªããŠãã ããã
- å®éšçAPIããµããŒãããReactã®ããŒãžã§ã³ïŒå¿ èŠãªããŒãžã§ã³ã«ã€ããŠã¯ãReactã®ããã¥ã¡ã³ãã確èªããŠãã ããïŒã
- ReactãµãŒããŒã³ã³ããŒãã³ããæå¹ã«ãªã£ãŠããïŒéåžžã¯Next.jsãRemixãªã©ã®ãã¬ãŒã ã¯ãŒã¯ã§äœ¿çšãããŸãïŒã
äŸïŒç°¡åãªåãåãããã©ãŒã
åºæ¬çãªåãåãããã©ãŒã ã³ã³ããŒãã³ããæ¬¡ã«ç€ºããŸãã
```jsx // app/actions.js (ãµãŒããŒã¢ã¯ã·ã§ã³) 'use server' export async function submitContactForm(formData) { // ããŒã¿ããŒã¹åŒã³åºããŸãã¯APIãªã¯ãšã¹ããã·ãã¥ã¬ãŒãããŸã await new Promise(resolve => setTimeout(resolve, 2000)); const name = formData.get('name'); const email = formData.get('email'); const message = formData.get('message'); if (!name || !email || !message) { return { success: false, message: 'ãã¹ãŠã®ãã£ãŒã«ããå¿ é ã§ãã' }; } try { // å®éã®APIåŒã³åºããŸãã¯ããŒã¿ããŒã¹æäœã«çœ®ãæããŸã console.log('ãã©ãŒã ãéä¿¡ãããŸãã:', { name, email, message }); return { success: true, message: 'ãã©ãŒã ã¯æ£åžžã«éä¿¡ãããŸããïŒ' }; } catch (error) { console.error('ãã©ãŒã ã®éä¿¡ãšã©ãŒ:', error); return { success: false, message: 'ãã©ãŒã ã®éä¿¡ã«å€±æããŸããã' }; } } // app/components/ContactForm.jsx (ã¯ã©ã€ã¢ã³ãã³ã³ããŒãã³ã) 'use client' import { experimental_useFormStatus as useFormStatus } from 'react' import { submitContactForm } from '../actions' function SubmitButton() { const { pending } = useFormStatus() return ( ) } export default function ContactForm() { return ( ); } ```説æ
- ãµãŒããŒã¢ã¯ã·ã§ã³ïŒ
app/actions.jsïŒïŒãã®ãã¡ã€ã«ã¯ãsubmitContactForm颿°ãå®çŸ©ããŸããããã¯ãµãŒããŒã¢ã¯ã·ã§ã³ã§ãããã©ãŒã éä¿¡ã®éåææ§ã瀺ãããã«ã2ç§ã®é å»¶ã§APIãªã¯ãšã¹ããã·ãã¥ã¬ãŒãããŸãããŸããåºæ¬çãªæ€èšŒãšãšã©ãŒåŠçãè¡ããŸãã - ã¯ã©ã€ã¢ã³ãã³ã³ããŒãã³ãïŒ
app/components/ContactForm.jsxïŒïŒãã®ãã¡ã€ã«ã¯ãContactFormã³ã³ããŒãã³ããå®çŸ©ããŸããããã¯ã¯ã©ã€ã¢ã³ãã³ã³ããŒãã³ãã§ããexperimental_useFormStatusããã¯ãšsubmitContactFormã¢ã¯ã·ã§ã³ãã€ã³ããŒãããŸãã useFormStatusã®äœ¿çšæ³ïŒSubmitButtonã³ã³ããŒãã³ãå ã§ãuseFormStatusãåŒã³åºãããŸãããã®ããã¯ã¯ããã©ãŒã ã®éä¿¡ç¶æ ã«é¢ããæ å ±ãæäŸããŸããpendingããããã£ïŒuseFormStatusã«ãã£ãŠè¿ãããpendingããããã£ã¯ããã©ãŒã ãçŸåšéä¿¡äžãã©ããã瀺ããŸããããã¯ãéä¿¡ãã¿ã³ãç¡å¹ã«ãããéä¿¡äž...ãã¡ãã»ãŒãžã衚瀺ããããã«äœ¿çšãããŸãã- ãã©ãŒã ã®ãã€ã³ãã£ã³ã°ïŒ
formèŠçŽ ã®actionããããã£ã¯ãsubmitContactFormãµãŒããŒã¢ã¯ã·ã§ã³ã«ãã€ã³ããããŸããããã¯ããã©ãŒã ãéä¿¡ããããšãã«ãµãŒããŒã¢ã¯ã·ã§ã³ãåŒã³åºãããã«Reactã«æç€ºããŸãã
é«åºŠãªäœ¿çšæ³ãšèæ ®äºé
æåããã³ãšã©ãŒç¶æ ã®åŠç
experimental_useFormStatusã¯éä¿¡ç¶æ
ã®è¿œè·¡ãç°¡çŽ åããŸãããå€ãã®å Žåãæåããã³ãšã©ãŒç¶æ
ãæç€ºçã«åŠçããå¿
èŠããããŸãããµãŒããŒã¢ã¯ã·ã§ã³ã¯ãæåãŸãã¯å€±æã瀺ãããŒã¿ãè¿ãããšãã§ããããã䜿çšããŠUIãé©å®æŽæ°ã§ããŸãã
äŸïŒ
```jsx // app/components/ContactForm.jsx (倿޿žã¿) 'use client' import { experimental_useFormStatus as useFormStatus } from 'react' import { submitContactForm } from '../actions' import { useState } from 'react'; function SubmitButton() { const { pending } = useFormStatus() return ( ) } export default function ContactForm() { const [message, setMessage] = useState(null); async function handleSubmit(formData) { const result = await submitContactForm(formData); setMessage(result); } return ({message.message}
)}説æïŒ
- ã¡ãã»ãŒãžã®ç¶æ
ïŒãµãŒããŒã¢ã¯ã·ã§ã³ã«ãã£ãŠè¿ãããçµæãæ ŒçŽããããã«ã
messageç¶æ 倿°ãå°å ¥ãããŸããã - çµæã®åŠçïŒãã©ãŒã ãéä¿¡ããããšã
handleSubmit颿°ã¯ããµãŒããŒã¢ã¯ã·ã§ã³ããã®çµæã§messageç¶æ ãæŽæ°ããŸãã - ã¡ãã»ãŒãžã®è¡šç€ºïŒã³ã³ããŒãã³ãã¯ãçµæã®
successããããã£ã«åºã¥ããŠã¡ãã»ãŒãžã衚瀺ããæåããã³ãšã©ãŒç¶æ ã«å¯ŸããŠç°ãªãCSSã¯ã©ã¹ãé©çšããŸãã
ããã°ã¬ãã·ããšã³ãã³ã¹ã¡ã³ã
experimental_useFormStatusã¯ãããã°ã¬ãã·ããšã³ãã³ã¹ã¡ã³ãã®ã·ããªãªã§åšåãçºæ®ããŸããæšæºã®HTMLãã©ãŒã ãReactã§æ®µéçã«æ¡åŒµããããšã«ãããJavaScriptã倱æããå Žåã§ãåºæ¬çãªæ©èœãæãªãããšãªããããåªãããŠãŒã¶ãŒãšã¯ã¹ããªãšã³ã¹ãæäŸã§ããŸãã
äŸïŒ
åºæ¬çãªHTMLãã©ãŒã ããå§ããŸãïŒ
```html ```次ã«ãReactãšexperimental_useFormStatusã§æ®µéçã«æ¡åŒµã§ããŸãã
説æïŒ
- åæHTMLãã©ãŒã ïŒ
public/contact.htmlãã¡ã€ã«ã«ã¯ãJavaScriptãªãã§ãæ©èœããæšæºã®HTMLãã©ãŒã ãå«ãŸããŠããŸãã - ããã°ã¬ãã·ããšã³ãã³ã¹ã¡ã³ãïŒ
EnhancedContactFormã³ã³ããŒãã³ãã¯ãHTMLãã©ãŒã ãæ®µéçã«æ¡åŒµããŸããJavaScriptãæå¹ã«ãªã£ãŠããå ŽåãReactãåŒãç¶ããããè±å¯ãªãŠãŒã¶ãŒãšã¯ã¹ããªãšã³ã¹ãæäŸããŸãã useFormStateããã¯ïŒãã©ãŒã ã®ç¶æ ã管çãããµãŒããŒã¢ã¯ã·ã§ã³ããã©ãŒã ã«ãã€ã³ãããããã«ãuseFormStateã䜿çšããŸãã-
stateïŒuseFormStateããã®stateã¯ããµãŒããŒã¢ã¯ã·ã§ã³ããã®æ»ãå€ãä¿æããããã«ãªããæåãŸãã¯ãšã©ãŒã¡ãã»ãŒãžã確èªã§ããŸãã
åœéçãªèæ ®äºé
ã°ããŒãã«ãªãªãŒãã£ãšã³ã¹åãã®ãã©ãŒã ãå®è£ ããå Žåãããã€ãã®åœéçãªèæ ®äºé ãéèŠã«ãªããŸãã
- ããŒã«ãªãŒãŒã·ã§ã³ïŒãã©ãŒã ã®ã©ãã«ãã¡ãã»ãŒãžãããã³ãšã©ãŒã¡ãã»ãŒãžãç°ãªãèšèªã«ããŒã«ã©ã€ãºãããŠããããšã確èªããŸããi18nextã®ãããªããŒã«ã¯ã翻蚳ã®ç®¡çã«åœ¹ç«ã¡ãŸãã
- æ¥ä»ãšæ°å€ã®åœ¢åŒïŒãŠãŒã¶ãŒã®ãã±ãŒã«ã«åŸã£ãŠãæ¥ä»ãšæ°å€ã®åœ¢åŒãåŠçããŸãã
Intlãmoment.jsïŒæ¥ä»ã®ãã©ãŒãããçšã§ãããçŸåšã¯ã¬ã¬ã·ãŒãšèŠãªãããŠããŸãïŒã®ãããªã©ã€ãã©ãªã䜿çšããŠãæ¥ä»ãšæ°å€ãæ£ãããã©ãŒãããããŸãã - äœæã®åœ¢åŒïŒåœã«ãã£ãŠäœæã®åœ¢åŒãç°ãªããŸããè€æ°ã®äœæåœ¢åŒããµããŒãããã©ã€ãã©ãªã䜿çšãããããŠãŒã¶ãŒã®å Žæã«åºã¥ããŠã«ã¹ã¿ã ãã©ãŒã ãã£ãŒã«ããäœæããããšãæ€èšããŠãã ããã
- é»è©±çªå·ã®æ€èšŒïŒåœéæšæºã«åŸã£ãŠé»è©±çªå·ãæ€èšŒããŸãã
libphonenumber-jsã®ãããªã©ã€ãã©ãªãããã«åœ¹ç«ã¡ãŸãã - å³ããå·ŠïŒRTLïŒã®ãµããŒãïŒãã©ãŒã ã®ã¬ã€ã¢ãŠãããã¢ã©ãã¢èªãããã©ã€èªã®ãããªRTLèšèªããµããŒãããŠããããšã確èªããŸããããè¯ãRTLãµããŒãã®ããã«ãCSSè«çããããã£ïŒäŸãã°ã
margin-leftã®ä»£ããã«margin-inline-startïŒã䜿çšããŸãã - ã¢ã¯ã»ã·ããªãã£ïŒã¢ã¯ã»ã·ããªãã£ã¬ã€ãã©ã€ã³ïŒWCAGïŒã«æºæ ããŠãå Žæã«é¢ä¿ãªããé害ã®ãã人ããã©ãŒã ã䜿çšã§ããããã«ããŸãã
äŸïŒããŒã«ã©ã€ãºããããã©ãŒã ã©ãã«
```jsx // i18n/locales/en.json { "contactForm": { "nameLabel": "Name", "emailLabel": "Email", "messageLabel": "Message", "submitButton": "Submit", "successMessage": "Form submitted successfully!", "errorMessage": "Failed to submit form." } } // i18n/locales/fr.json { "contactForm": { "nameLabel": "Nom", "emailLabel": "Courriel", "messageLabel": "Message", "submitButton": "Soumettre", "successMessage": "Formulaire soumis avec succÚs !", "errorMessage": "Ãchec de la soumission du formulaire." } } // app/components/LocalizedContactForm.jsx 'use client' import { useTranslation } from 'react-i18next'; import { experimental_useFormStatus as useFormStatus } from 'react' import { submitContactForm } from '../actions' import { useState } from 'react'; function SubmitButton() { const { pending } = useFormStatus() const { t } = useTranslation(); return ( ) } export default function LocalizedContactForm() { const { t } = useTranslation(); const [message, setMessage] = useState(null); async function handleSubmit(formData) { const result = await submitContactForm(formData); setMessage(result); } return ({message.message}
)}説æïŒ
- 翻蚳ãã¡ã€ã«ïŒãã®äŸã§ã¯ã
react-i18nextã䜿çšããŠç¿»èš³ã管çããŸããåå¥ã®JSONãã¡ã€ã«ã«ã¯ãç°ãªãèšèªã®ç¿»èš³ãå«ãŸããŠããŸãã useTranslationããã¯ïŒuseTranslationããã¯ã¯ãç¿»èš³é¢æ°ïŒtïŒãžã®ã¢ã¯ã»ã¹ãæäŸããŸããããã¯ãããŒã«ã©ã€ãºãããæååãååŸããããã«äœ¿çšãããŸãã- ããŒã«ã©ã€ãºãããã©ãã«ïŒãã©ãŒã ã©ãã«ãšãã¿ã³ããã¹ãã¯ã
t颿°ã䜿çšããŠååŸããããŠãŒã¶ãŒã®åªå èšèªã§è¡šç€ºãããããã«ããŸãã
ã¢ã¯ã»ã·ããªãã£ã®èæ ®äºé
é害ã®ãããŠãŒã¶ãŒãå«ãããã¹ãŠã®ãŠãŒã¶ãŒããã©ãŒã ã«ã¢ã¯ã»ã¹ã§ããããã«ããããšã¯éåžžã«éèŠã§ããã¢ã¯ã»ã·ããªãã£ã«é¢ããéèŠãªèæ ®äºé ã以äžã«ç€ºããŸãã
- ã»ãã³ãã£ãã¯HTMLïŒ
<label>ã<input>ã<textarea>ã<button>ã®ãããªã»ãã³ãã£ãã¯HTMLèŠçŽ ãæ£ãã䜿çšããŸãã - ã©ãã«ïŒ
<label>ã®for屿§ãšãã©ãŒã ã³ã³ãããŒã«ã®id屿§ã䜿çšããŠãã©ãã«ããã©ãŒã ã³ã³ãããŒã«ã«é¢é£ä»ããŸãã - ARIA屿§ïŒARIA屿§ã䜿çšããŠãæ¯æŽæè¡ã«è¿œå ã®æ
å ±ãæäŸããŸããããšãã°ã
aria-describedbyã䜿çšããŠããã©ãŒã ã³ã³ãããŒã«ã説æã«ãªã³ã¯ããŸãã - ãšã©ãŒåŠçïŒãšã©ãŒãæç¢ºã«ç€ºãã圹ç«ã€ãšã©ãŒã¡ãã»ãŒãžãæäŸããŸãã
aria-invalidã®ãããªARIA屿§ã䜿çšããŠãç¡å¹ãªãã©ãŒã ã³ã³ãããŒã«ã瀺ããŸãã - ããŒããŒãããã²ãŒã·ã§ã³ïŒãŠãŒã¶ãŒãããŒããŒãã䜿çšããŠãã©ãŒã ãããã²ãŒãã§ããããšã確èªããŸããå¿
èŠã«å¿ããŠã
tabindex屿§ã䜿çšããŠãã©ãŒã«ã¹é åºãå¶åŸ¡ããŸãã - è²ã®ã³ã³ãã©ã¹ãïŒããã¹ããšèæ¯è²ã®éã«ååãªè²ã®ã³ã³ãã©ã¹ããããããšã確èªããŸãã
- ãã©ãŒã æ§é ïŒæç¢ºã§äžè²«ãããã©ãŒã æ§é ã䜿çšããŸãã
<fieldset>ããã³<legend>èŠçŽ ã䜿çšããŠãé¢é£ãããã©ãŒã ã³ã³ãããŒã«ãã°ã«ãŒãåããŸãã
äŸïŒã¢ã¯ã»ã¹å¯èœãªãšã©ãŒåŠç
```jsx // app/components/AccessibleContactForm.jsx 'use client' import { experimental_useFormStatus as useFormStatus } from 'react' import { submitContactForm } from '../actions' import { useState } from 'react'; function SubmitButton() { const { pending } = useFormStatus() return ( ) } export default function AccessibleContactForm() { const [message, setMessage] = useState(null); const [errors, setErrors] = useState({}); async function handleSubmit(formData) { // åºæ¬çãªã¯ã©ã€ã¢ã³ãåŽã®æ€èšŒ const newErrors = {}; if (!formData.get('name')) { newErrors.name = 'ååã¯å¿ é ã§ãã'; } if (!formData.get('email')) { newErrors.email = 'ã¡ãŒã«ã¢ãã¬ã¹ã¯å¿ é ã§ãã'; } if (!formData.get('message')) { newErrors.message = 'ã¡ãã»ãŒãžã¯å¿ é ã§ãã'; } if (Object.keys(newErrors).length > 0) { setErrors(newErrors); return; } setErrors({}); // 以åã®ãšã©ãŒãã¯ãªã¢ const result = await submitContactForm(formData); setMessage(result); } return ({message.message}
)}説æïŒ
- ãšã©ãŒã¹ããŒãïŒã³ã³ããŒãã³ãã¯ãæ€èšŒãšã©ãŒã远跡ããããã«
errorsã¹ããŒããç¶æããŸãã - ã¯ã©ã€ã¢ã³ãåŽã®æ€èšŒïŒ
handleSubmit颿°ã¯ããã©ãŒã ãéä¿¡ããåã«åºæ¬çãªã¯ã©ã€ã¢ã³ãåŽã®æ€èšŒãå®è¡ããŸãã - ARIA屿§ïŒ
aria-invalid屿§ã¯ãç¹å®ã®ãã©ãŒã ã³ã³ãããŒã«ã«ãšã©ãŒãããå Žåã«trueã«èšå®ãããŸããaria-describedby屿§ã¯ããã©ãŒã ã³ã³ãããŒã«ããšã©ãŒã¡ãã»ãŒãžã«ãªã³ã¯ããŸãã - ãšã©ãŒã¡ãã»ãŒãžïŒãšã©ãŒã¡ãã»ãŒãžã¯ã察å¿ãããã©ãŒã ã³ã³ãããŒã«ã®æšªã«è¡šç€ºãããŸãã
æœåšçãªèª²é¡ãšå¶éäºé
- å®éšçã¹ããŒã¿ã¹ïŒå®éšçAPIã§ããããã
experimental_useFormStatusã¯ãå°æ¥ã®ReactããŒãžã§ã³ã§å€æŽãŸãã¯åé€ãããå¯èœæ§ããããŸããReactã®ããã¥ã¡ã³ãã§ææ°æ å ±ãå ¥æããå¿ èŠã«å¿ããŠã³ãŒããé©å¿ãããæºåãããŠããããšãéèŠã§ãã - éå®ãããç¯å²ïŒãã®ããã¯ã¯äž»ã«éä¿¡ã¹ããŒã¿ã¹ã®è¿œè·¡ã«çŠç¹ãåœãŠãŠãããæ€èšŒãããŒã¿åŠçã®ãããªå æ¬çãªãã©ãŒã ç®¡çæ©èœã¯æäŸããŠããŸããããããã®åŽé¢ã«ã€ããŠã¯ã远å ã®ããžãã¯ãå®è£ ããå¿ èŠãããå ŽåããããŸãã
- ãµãŒããŒã¢ã¯ã·ã§ã³ã®äŸåé¢ä¿ïŒãã®ããã¯ã¯ãµãŒããŒã¢ã¯ã·ã§ã³ãšé£æºããããã«èšèšãããŠããããã¹ãŠã®ãŠãŒã¹ã±ãŒã¹ã«é©ããŠãããšã¯éããŸããããµãŒããŒã¢ã¯ã·ã§ã³ã䜿çšããŠããªãå Žåã¯ããã©ãŒã ã¹ããŒã¿ã¹ã管çããããã®ä»£æ¿ãœãªã¥ãŒã·ã§ã³ãèŠã€ããå¿ èŠãããå ŽåããããŸãã
çµè«
experimental_useFormStatusããã¯ã¯ãç¹ã«ãµãŒããŒã¢ã¯ã·ã§ã³ãšããã°ã¬ãã·ããšã³ãã³ã¹ã¡ã³ãã䜿çšããå Žåã«ãReactã§ã®ãã©ãŒã éä¿¡ç¶æ
ã®ç®¡çã«ãããŠå€§ããªæ¹åããããããŸããç¶æ
管çãç°¡çŽ åããæç¢ºã§ç°¡æœãªAPIãæäŸããããšã«ãããéçºè
ã®ãšã¯ã¹ããªãšã³ã¹ãšãŠãŒã¶ãŒãšã¯ã¹ããªãšã³ã¹ã®äž¡æ¹ãåäžãããŸãããã ããå®éšçãªæ§è³ªãèãããšãä»åŸã®ReactããŒãžã§ã³ã§ã®æŽæ°ãšæœåšçãªå€æŽã«ã€ããŠåžžã«æ
å ±ãå
¥æããããšãéèŠã§ãããã®å©ç¹ãå¶éäºé
ãããã³ãã¹ããã©ã¯ãã£ã¹ãçè§£ããããšã§ãexperimental_useFormStatusã广çã«æŽ»çšããŠãReactã¢ããªã±ãŒã·ã§ã³ã§ããå
ç¢ã§ãŠãŒã¶ãŒãã¬ã³ããªãŒãªãã©ãŒã ãæ§ç¯ã§ããŸããã°ããŒãã«ãªãŒãã£ãšã³ã¹åãã®å
æ¬çãªãã©ãŒã ãäœæããããã«ãåœéåãšã¢ã¯ã»ã·ããªãã£ã®ãã¹ããã©ã¯ãã£ã¹ãèæ
®ããããšãå¿ããªãã§ãã ããã