React\uff1av18.3.1<\/p>\n\n\n\n
React Hook Form\uff1av7.51.4<\/p>\n\n\n\n
@hookform\/resolver\uff1av3.4.0<\/p>\n\n\n\n
yup\uff1av1.4.0<\/p>\n\n\n\n
yup-locale-ja\uff1av1.0.0<\/p>\n\n\n\n
\u516c\u5f0f\u30b5\u30a4\u30c8<\/a><\/p>\n\n\n\n \u30d5\u30a9\u30fc\u30e0\u306e\u30d0\u30ea\u30c7\u30fc\u30c8\u7b49\u3092\u884c\u3046\u305f\u3081\u306e\u30e9\u30a4\u30d6\u30e9\u30ea\u3002<\/p>\n\n\n\n Yup<\/a>\u3068\u3044\u3046\u30b9\u30ad\u30fc\u30de\u30d3\u30eb\u30c0\u30fc\u3068\u7d44\u307f\u5408\u308f\u305b\u308b\u3068\u30d0\u30ea\u30c7\u30fc\u30b7\u30e7\u30f3\u30eb\u30fc\u30eb\u8a18\u8ff0\u7b87\u6240\u3068JSX\u3092\u5206\u5272\u3067\u304d\u308b\u3002<\/p>\n\n\n\n \u305d\u308c\u305e\u308c\u306e\u30b3\u30fc\u30c9\u3092\u5b9f\u969b\u306b\u52d5\u304b\u3057\u3066\u78ba\u8a8d\u3059\u308b\u3068\u826f\u3044\u3002<\/p>\n\n\n\n \u30b9\u30ad\u30fc\u30de\u30d3\u30eb\u30c0\u30fc\u30fb\u691c\u8a3c\u30e9\u30a4\u30d6\u30e9\u30ea\u306eYup\u3068yup-locale-ja\u3092\u4e0b\u8a18\u30b3\u30de\u30f3\u30c9\u3067\u30a4\u30f3\u30b9\u30c8\u30fc\u30eb\u3002<\/p>\n\n\n \u74b0\u5883 React\uff1av18.3.1 React Hook Form\uff1av7.51.4 @hookform\/resolver\uff1av3.4.0 yup\uff1av1.4.0 yup-locale-ja\uff1av1.0.0 \u53c2\u8003 \u516c\u5f0f\u30b5\u30a4\u30c8 \u30d5\u30a9 […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[104],"tags":[105],"class_list":["post-1168","post","type-post","status-publish","format-standard","hentry","category-react","tag-react"],"_links":{"self":[{"href":"https:\/\/shinke1987.net\/index.php?rest_route=\/wp\/v2\/posts\/1168","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/shinke1987.net\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/shinke1987.net\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/shinke1987.net\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/shinke1987.net\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=1168"}],"version-history":[{"count":2,"href":"https:\/\/shinke1987.net\/index.php?rest_route=\/wp\/v2\/posts\/1168\/revisions"}],"predecessor-version":[{"id":1170,"href":"https:\/\/shinke1987.net\/index.php?rest_route=\/wp\/v2\/posts\/1168\/revisions\/1170"}],"wp:attachment":[{"href":"https:\/\/shinke1987.net\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=1168"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/shinke1987.net\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=1168"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/shinke1987.net\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=1168"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}RHF\u306e\u307f\u306e\u5834\u5408<\/h2>\n\n\n\n
\u30a4\u30f3\u30b9\u30c8\u30fc\u30eb<\/h3>\n\n\n
\n% npm install react-hook-form\n<\/pre><\/div>\n\n\n
RHF2.tsx\u306e\u5185\u5bb9<\/h3>\n\n\n
\nimport { ReactNode } from 'react';\nimport { useForm } from 'react-hook-form';\n\nfunction RHF2(): ReactNode {\n type FormData = {\n name: string,\n mail: string,\n prefectures: string,\n municipality: string,\n };\n\n const {\n register,\n handleSubmit,\n reset,\n getValues,\n formState: {\n errors,\n isDirty,\n dirtyFields,\n touchedFields,\n isValid,\n isSubmitting,\n submitCount,\n },\n } = useForm<FormData>({\n defaultValues: {\n name: '',\n mail: '',\n prefectures: '',\n municipality: '',\n },\n });\n\n \/\/ \u9001\u4fe1\u30dc\u30bf\u30f3\u306e\u30a4\u30d9\u30f3\u30c8\u30cf\u30f3\u30c9\u30e9\u3002\n const onSubmit = (data) => {\n console.log('onSubmit data = ', data);\n\n return new Promise((resolve) => {\n setTimeout(() => {\n resolve();\n }, 2000);\n });\n };\n\n \/\/ \u30d0\u30ea\u30c7\u30fc\u30b7\u30e7\u30f3\u30a8\u30e9\u30fc\u6642\u306b\u5b9f\u884c\u3055\u308c\u308b\u95a2\u6570\u3002\n const onError = (data) => {\n console.log('onError data = ', data);\n };\n\n \/\/ \u30ea\u30bb\u30c3\u30c8\u30dc\u30bf\u30f3\u306e\u30a4\u30d9\u30f3\u30c8\u30cf\u30f3\u30c9\u30e9\u3002\n const onReset = (data) => {\n console.log('onReset data = ', data);\n reset();\n };\n\n const validateMessage = {\n required: '\u5165\u529b\u3057\u3066\u304f\u3060\u3055\u3044',\n maxLength: '5\u6587\u5b57\u4ee5\u4e0b\u3067\u5165\u529b\u3057\u3066\u304f\u3060\u3055\u3044',\n };\n\n \/\/ \u30b9\u30d7\u30ec\u30c3\u30c9\u69cb\u6587\u304c\u7981\u6b62\u3055\u308c\u3066\u3044\u308b\u5834\u5408\u306f\u6b21\u306e\u3088\u3046\u306b\u66f8\u304f\u3068\u826f\u3044\u3002\n const {\n onChange, onBlur, ref, name,\n } = register('municipality', {\n required: validateMessage.required,\n maxLength: {\n value: 5,\n message: validateMessage.required,\n },\n });\n\n return (\n <>\n <div>\n <div>\n {`\u9001\u4fe1\u30dc\u30bf\u30f3\u62bc\u4e0b\u56de\u6570\uff08submitCount\uff09\uff1a${submitCount.toString()}`}\n <\/div>\n\n <br \/>\n <div>\n {`\u5909\u66f4\uff08isDirty\uff09\uff1a${isDirty.toString()}`}\n <\/div>\n\n <br \/>\n <div>\n {`\u30a8\u30e9\u30fc\uff08\u5168\u4f53\uff09\uff08isValid\uff09\uff1a${isValid.toString()}`}\n <\/div>\n <\/div>\n\n <br \/>\n <form onSubmit={handleSubmit(onSubmit, onError)} noValidate>\n <div>\n <div>\n <label htmlFor="name">\n \u540d\u524d\n <\/label>\n <input\n type="text"\n id="name"\n {\n ...register('name', {\n required: validateMessage.required,\n maxLength: {\n value: 5,\n message: validateMessage.maxLength,\n },\n })\n }\n \/>\n <\/div>\n <div>\n <div>\n {`\u5909\u66f4\uff08dirtyFields\uff09\uff1a${dirtyFields.name?.toString()}`}\n <\/div>\n <div>\n {`\u64cd\u4f5c\uff08isTouched\uff09\uff1a${touchedFields.name?.toString()}`}\n <\/div>\n <div>\n {`\u30a8\u30e9\u30fc\u60c5\u5831\uff08error\uff09\uff1a${errors.name?.message}`}\n <\/div>\n <\/div>\n <\/div>\n\n <br \/>\n <div>\n <div>\n <label htmlFor="mail">\n \u30e1\u30fc\u30eb\u30a2\u30c9\u30ec\u30b9\n <\/label>\n <input\n type="email"\n id="mail"\n {\n ...register('mail', {\n required: validateMessage.required,\n maxLength: {\n value: 5,\n message: validateMessage.maxLength,\n },\n pattern: {\n value: \/[0-9]\/i,\n message: '\u30e1\u30fc\u30eb\u30a2\u30c9\u30ec\u30b9\u306e\u5f62\u5f0f\u304c\u4e0d\u6b63\u3067\u3059',\n },\n })\n }\n \/>\n <\/div>\n <div>\n <div>\n {`\u5909\u66f4\uff08dirtyFields\uff09\uff1a${dirtyFields.mail?.toString()}`}\n <\/div>\n <div>\n {`\u64cd\u4f5c\uff08isTouched\uff09\uff1a${touchedFields.mail?.toString()}`}\n <\/div>\n <div>\n {`\u30a8\u30e9\u30fc\u60c5\u5831\uff08error\uff09\uff1a${errors.mail?.message}`}\n <\/div>\n <\/div>\n <\/div>\n\n <br \/>\n <div>\n <div>\n <label htmlFor="prefectures">\n \u90fd\u9053\u5e9c\u770c\n <\/label>\n <select\n id="prefectures"\n {\n ...register('prefectures', {\n required: validateMessage.required,\n })\n }\n >\n <option value="1">\n \u5317\u6d77\u9053\n <\/option>\n <option value="2">\n \u6771\u4eac\n <\/option>\n <option value="3">\n \u6c96\u7e04\n <\/option>\n <\/select>\n <\/div>\n <div>\n <div>\n {`\u5909\u66f4\uff08dirtyFields\uff09\uff1a${dirtyFields.prefectures?.toString()}`}\n <\/div>\n <div>\n {`\u64cd\u4f5c\uff08isTouched\uff09\uff1a${touchedFields.prefectures?.toString()}`}\n <\/div>\n <div>\n \u30a8\u30e9\u30fc\uff08invalid\uff09\uff1a\n <\/div>\n <div>\n {`\u30a8\u30e9\u30fc\u60c5\u5831\uff08error\uff09\uff1a${errors.prefectures?.message}`}\n <\/div>\n <\/div>\n <\/div>\n\n <br \/>\n <div>\n <div>\n <label htmlFor="municipality">\n \u5e02\u753a\u6751\n <\/label>\n <input\n type="text"\n id="municipality"\n disabled={getValues('prefectures') === ''}\n onChange={onChange}\n onBlur={onBlur}\n ref={ref}\n name={name}\n \/>\n <\/div>\n <div>\n <div>\n {`\u5909\u66f4\uff08dirtyFields\uff09\uff1a${dirtyFields.municipality?.toString()}`}\n <\/div>\n <div>\n {`\u64cd\u4f5c\uff08isTouched\uff09\uff1a${touchedFields.municipality?.toString()}`}\n <\/div>\n <div>\n {`\u30a8\u30e9\u30fc\u60c5\u5831\uff08error\uff09\uff1a${errors.municipality?.message}`}\n <\/div>\n <\/div>\n <\/div>\n\n <br \/>\n <div>\n <button\n type="submit"\n disabled={(submitCount === 0 ? false : !isDirty || !isValid) || isSubmitting}\n >\n \u9001\u4fe1\n <\/button>\n {isSubmitting && <div>...\u9001\u4fe1\u4e2d...<\/div>}\n <\/div>\n\n <br \/>\n <div>\n <button\n type="button"\n onClick={onReset}\n >\n \u30ea\u30bb\u30c3\u30c8\n <\/button>\n <\/div>\n <\/form>\n <\/>\n );\n}\n\nexport default RHF2;\n<\/pre><\/div>\n\n\nRHF + Yup\u306e\u5834\u5408<\/h2>\n\n\n\n
\u53c2\u8003<\/h3>\n\n\n\n
\n
\u30a4\u30f3\u30b9\u30c8\u30fc\u30eb<\/h3>\n\n\n\n
\n% npm install @hookform\/resolvers yup yup-locale-ja\n<\/pre><\/div>\n\n\n
RhfWithYup.tsx\u306e\u5185\u5bb9<\/h3>\n\n\n
\nimport { useForm } from 'react-hook-form';\nimport * as yup from 'yup';\nimport { suggestive } from 'yup-locale-ja';\nimport { ReactNode } from 'react';\nimport { yupResolver } from '@hookform\/resolvers\/yup';\n\n\/\/ yup-locale-ja\u6709\u52b9\u5316\u3002\nyup.setLocale(suggestive);\n\n\/\/ \u30d0\u30ea\u30c7\u30fc\u30b7\u30e7\u30f3\u30eb\u30fc\u30eb\u8ffd\u52a0\u3002\nyup.addMethod(yup.string, 'originalRule', function () {\n return this.test(\n 'originalRule',\n ({ label }) => `${label}\u306bz\u304c\u542b\u307e\u308c\u3066\u3044\u307e\u3059`,\n (value) => !value?.includes('z'),\n );\n});\n\n\/\/ \u30d0\u30ea\u30c7\u30fc\u30b7\u30e7\u30f3\u30eb\u30fc\u30eb\u8a2d\u5b9a\u3002\nconst schema = yup.object({\n \/\/ register\u95a2\u6570\u306e\u5f15\u6570\u306ename\u3068\u4e00\u81f4\u3055\u305b\u308b\u5fc5\u8981\u304c\u3042\u308b\u3002\n name: yup.string()\n .label('\u540d\u524d')\n \/\/ NFKC\u3067Unicode\u6b63\u898f\u5316\u3055\u308c\u308b\u3002\u9001\u4fe1\u6642\u306b\u78ba\u8a8d\u53ef\u80fd\u3002\n \/\/ \u4f8b\uff1a\uff71\uff72\uff73\uff74\uff75 \u2192 \u30a2\u30a4\u30a6\u30a8\u30aa\n .transform((value) => value.normalize('NFKC'))\n .required()\n .max(5),\n mail: yup.string()\n .label('\u30e1\u30fc\u30eb\u30a2\u30c9\u30ec\u30b9')\n .required()\n .email()\n \/\/ \u4e0a\u3067\u4f5c\u6210\u3057\u305f\u30d0\u30ea\u30c7\u30fc\u30b7\u30e7\u30f3\u30eb\u30fc\u30eb\u3002\n .originalRule(),\n prefectures: yup.string()\n .label('\u90fd\u9053\u5e9c\u770c')\n .required(),\n municipality: yup.string()\n .label('\u5e02\u753a\u6751')\n .required()\n .max(7),\n});\n\nfunction RhfWithYup(): ReactNode {\n type FormData = {\n name: string,\n mail: string,\n prefectures: string,\n municipality: string,\n };\n\n const {\n register,\n handleSubmit,\n reset,\n getValues,\n formState: {\n errors,\n isDirty,\n dirtyFields,\n touchedFields,\n isValid,\n isSubmitting,\n submitCount,\n },\n } = useForm<FormData>({\n defaultValues: {\n name: '',\n mail: '',\n prefectures: '',\n municipality: '',\n },\n \/\/ Yup\u306b\u691c\u8a3c\u3092\u59d4\u306d\u308b\u3002\n resolver: yupResolver(schema),\n });\n\n \/\/ \u9001\u4fe1\u30dc\u30bf\u30f3\u306e\u30a4\u30d9\u30f3\u30c8\u30cf\u30f3\u30c9\u30e9\u3002\n const onSubmit = (data) => {\n console.log('onSubmit data = ', data);\n\n return new Promise((resolve) => {\n setTimeout(() => {\n resolve();\n }, 2000);\n });\n };\n\n \/\/ \u30d0\u30ea\u30c7\u30fc\u30b7\u30e7\u30f3\u30a8\u30e9\u30fc\u6642\u306b\u5b9f\u884c\u3055\u308c\u308b\u95a2\u6570\u3002\n const onError = (data) => {\n console.log('onError data = ', data);\n };\n\n \/\/ \u30ea\u30bb\u30c3\u30c8\u30dc\u30bf\u30f3\u306e\u30a4\u30d9\u30f3\u30c8\u30cf\u30f3\u30c9\u30e9\u3002\n const onReset = (data) => {\n console.log('onReset data = ', data);\n reset();\n };\n\n \/\/ \u30b9\u30d7\u30ec\u30c3\u30c9\u69cb\u6587\u304c\u7981\u6b62\u3055\u308c\u3066\u3044\u308b\u5834\u5408\u306f\u6b21\u306e\u3088\u3046\u306b\u66f8\u304f\u3068\u826f\u3044\u3002\n const {\n onChange, onBlur, ref, name,\n } = register('municipality');\n\n return (\n <>\n <div>\n <div>\n {`\u9001\u4fe1\u30dc\u30bf\u30f3\u62bc\u4e0b\u56de\u6570\uff08submitCount\uff09\uff1a${submitCount.toString()}`}\n <\/div>\n\n <br \/>\n <div>\n {`\u5909\u66f4\uff08isDirty\uff09\uff1a${isDirty.toString()}`}\n <\/div>\n\n <br \/>\n <div>\n {`\u30a8\u30e9\u30fc\uff08\u5168\u4f53\uff09\uff08isValid\uff09\uff1a${isValid.toString()}`}\n <\/div>\n <\/div>\n\n <br \/>\n <form onSubmit={handleSubmit(onSubmit, onError)} noValidate>\n <div>\n <div>\n <label htmlFor="name">\n \u540d\u524d\n <\/label>\n <input\n type="text"\n id="name"\n {...register('name')}\n \/>\n <\/div>\n <div>\n <div>\n {`\u5909\u66f4\uff08dirtyFields\uff09\uff1a${dirtyFields.name?.toString()}`}\n <\/div>\n <div>\n {`\u64cd\u4f5c\uff08isTouched\uff09\uff1a${touchedFields.name?.toString()}`}\n <\/div>\n <div>\n {`\u30a8\u30e9\u30fc\u60c5\u5831\uff08error\uff09\uff1a${errors.name?.message}`}\n <\/div>\n <\/div>\n <\/div>\n\n <br \/>\n <div>\n <div>\n <label htmlFor="mail">\n \u30e1\u30fc\u30eb\u30a2\u30c9\u30ec\u30b9\n <\/label>\n <input\n type="email"\n id="mail"\n {...register('mail')}\n \/>\n <\/div>\n <div>\n <div>\n {`\u5909\u66f4\uff08dirtyFields\uff09\uff1a${dirtyFields.mail?.toString()}`}\n <\/div>\n <div>\n {`\u64cd\u4f5c\uff08isTouched\uff09\uff1a${touchedFields.mail?.toString()}`}\n <\/div>\n <div>\n {`\u30a8\u30e9\u30fc\u60c5\u5831\uff08error\uff09\uff1a${errors.mail?.message}`}\n <\/div>\n <\/div>\n <\/div>\n\n <br \/>\n <div>\n <div>\n <label htmlFor="prefectures">\n \u90fd\u9053\u5e9c\u770c\n <\/label>\n <select\n id="prefectures"\n {...register('prefectures')}\n >\n <option value="1">\n \u5317\u6d77\u9053\n <\/option>\n <option value="2">\n \u6771\u4eac\n <\/option>\n <option value="3">\n \u6c96\u7e04\n <\/option>\n <\/select>\n <\/div>\n <div>\n <div>\n {`\u5909\u66f4\uff08dirtyFields\uff09\uff1a${dirtyFields.prefectures?.toString()}`}\n <\/div>\n <div>\n {`\u64cd\u4f5c\uff08isTouched\uff09\uff1a${touchedFields.prefectures?.toString()}`}\n <\/div>\n <div>\n \u30a8\u30e9\u30fc\uff08invalid\uff09\uff1a\n <\/div>\n <div>\n {`\u30a8\u30e9\u30fc\u60c5\u5831\uff08error\uff09\uff1a${errors.prefectures?.message}`}\n <\/div>\n <\/div>\n <\/div>\n\n <br \/>\n <div>\n <div>\n <label htmlFor="municipality">\n \u5e02\u753a\u6751\n <\/label>\n <input\n type="text"\n id="municipality"\n disabled={getValues('prefectures') === ''}\n onChange={onChange}\n onBlur={onBlur}\n ref={ref}\n name={name}\n \/>\n <\/div>\n <div>\n <div>\n {`\u5909\u66f4\uff08dirtyFields\uff09\uff1a${dirtyFields.municipality?.toString()}`}\n <\/div>\n <div>\n {`\u64cd\u4f5c\uff08isTouched\uff09\uff1a${touchedFields.municipality?.toString()}`}\n <\/div>\n <div>\n {`\u30a8\u30e9\u30fc\u60c5\u5831\uff08error\uff09\uff1a${errors.municipality?.message}`}\n <\/div>\n <\/div>\n <\/div>\n\n <br \/>\n <div>\n <button\n type="submit"\n disabled={(submitCount === 0 ? false : !isDirty || !isValid) || isSubmitting}\n >\n \u9001\u4fe1\n <\/button>\n {isSubmitting && <div>...\u9001\u4fe1\u4e2d...<\/div>}\n <\/div>\n\n <br \/>\n <div>\n <button\n type="button"\n onClick={onReset}\n >\n \u30ea\u30bb\u30c3\u30c8\n <\/button>\n <\/div>\n <\/form>\n <\/>\n );\n}\n\nexport default RhfWithYup;\n<\/pre><\/div>","protected":false},"excerpt":{"rendered":"