{"id":2079,"date":"2022-07-18T03:33:26","date_gmt":"2022-07-17T18:33:26","guid":{"rendered":"http:\/\/www.agile-software.site\/?p=2079"},"modified":"2023-07-29T12:16:07","modified_gmt":"2023-07-29T03:16:07","slug":"react-useform%e3%82%92%e5%88%a9%e7%94%a8%e3%81%97%e3%81%a6form%e3%82%92%e4%bd%9c%e6%88%90%e3%81%99%e3%82%8b","status":"publish","type":"post","link":"https:\/\/agile-software.net\/?p=2079","title":{"rendered":"React useForm\u3092\u5229\u7528\u3057\u3066form\u3092\u4f5c\u6210\u3059\u308b"},"content":{"rendered":"\n

React Hook Form\u3068\u306f\uff1f<\/h2>\n\n\n\n

\u30d5\u30a9\u30fc\u30e0\u30d0\u30ea\u30c7\u30fc\u30b7\u30e7\u30f3\u30e9\u30a4\u30d6\u30e9\u30ea\u3002
\u30b3\u30fc\u30c9\u91cf\u3092\u6e1b\u3089\u3057\u3001\u518d\u30ec\u30f3\u30c0\u30ea\u30f3\u30b0\u3082\u6291\u5236\u3057\u3066\u304f\u308c\u3064\u3064\u3001\u9ad8\u6027\u80fd\u306a\u30d0\u30ea\u30c7\u30fc\u30b7\u30e7\u30f3\u3092\u53ef\u80fd\u3068\u3057\u307e\u3059\u3002<\/p>\n\n\n\nhttps:\/\/react-hook-form.com\/jp\/\n\n\n\n

\u30a4\u30f3\u30b9\u30c8\u30fc\u30eb<\/h2>\n\n\n\n
npm install react-hook-form<\/code><\/pre><\/div>\n\n\n\n
\u30a4\u30f3\u30b9\u30c8\u30fc\u30eb\u3067\u304d\u305f\u3089import\u3057\u3066\u5229\u7528\u3067\u304d\u307e\u3059\u3002<\/p>\n\n\n\n
import { useForm } from "react-hook-form";<\/code><\/pre><\/div>\n\n\n\n
const {\n  register,\n  watch,\n  handleSubmit,\n  formState: { errors },\n} = useForm<LoginForm>();<\/code><\/pre><\/div>\n\n\n\n
\u30e1\u30bd\u30c3\u30c9<\/h2>\n\n\n\n
register<\/h3>\n\n\n\n
\u30d5\u30a9\u30fc\u30e0\u304b\u3089\u5165\u529b\u3055\u308c\u305f\u5024\u306estate\u7ba1\u7406\u3001\u30d0\u30ea\u30c7\u30fc\u30b7\u30e7\u30f3\u51e6\u7406\u304c\u53ef\u80fd\u3067\u3059\u3002
\u4ee5\u4e0b\u306e\u30bd\u30fc\u30b9\u30b3\u30fc\u30c9\u3067\u306femail\u30d5\u30a9\u30fc\u30e0\u306e\u5024\u3092\u53d7\u3051\u53d6\u308a\u3001\u9805\u76ee\u5165\u529b\u5fc5\u9808\u306e\u30d0\u30ea\u30c7\u30fc\u30b7\u30e7\u30f3\u51e6\u7406\u3092\u66f8\u3044\u3066\u3044\u307e\u3059\u3002<\/p>\n\n\n\n
<div className="flex w-full flex-col">\n<label className="text-sm text-gray-800" htmlFor="email">\n  Email\n<\/label>\n<input\n  {...register("email", { required: "email\u3092\u5165\u529b\u3057\u3066\u304f\u3060\u3055\u3044" })}\n  className="rounded-md border px-3 py-2 focus:border-2 focus:border-teal-500 focus:outline-none"\n  type="email"\n  name="email"\n\/>\n<\/div><\/code><\/pre><\/div>\n\n\n\n
handleSubmit<\/h3>\n\n\n\n
\u30d5\u30a9\u30fc\u30e0\u3092submit\u3057\u305f\u6642\u306e\u51e6\u7406\u3092\u304b\u3051\u307e\u3059\u3002handleSubmit()<\/code>\u306f\u5f15\u6570\u3092\u4e8c\u3064\u53d7\u3051\u53d6\u308a\u307e\u3059\u3002
\u5f15\u65701\u306f\u30d0\u30ea\u30c7\u30fc\u30b7\u30e7\u30f3\u51e6\u7406\u304cOK\u306e\u5834\u5408\u306e\u95a2\u6570\u3001\u5f15\u65702\u306f\u30d0\u30ea\u30c7\u30fc\u30b7\u30e7\u30f3\u51e6\u7406\u304cNG\u306e\u5834\u5408\u306b\u547c\u3070\u308c\u308b\u95a2\u6570\u304c\u5165\u308a\u307e\u3059\u3002<\/p>\n\n\n\n
\/\/ \u30d0\u30ea\u30c7\u30fc\u30b7\u30e7\u30f3\u51e6\u7406\u304cOK\u306e\u5834\u5408\u306b\u547c\u3070\u308c\u308b\u95a2\u6570\nconst isValid = (data: LoginForm) => {\n  console.log(data);\n};\n\n\/\/ \u30d0\u30ea\u30c7\u30fc\u30b7\u30e7\u30f3\u51e6\u7406\u304cNG\u306e\u5834\u5408\u306b\u547c\u3070\u308c\u308b\u95a2\u6570\nconst isInValid = (erros: any) => {\n  console.log(errors);\n  console.log("Fail Login");\n};\n\n<form onSubmit={handleSubmit(isValid, isInValid)} className="flex w-full  flex-col items-center space-y-5 ">\n  \/\/\u7701\u7565\n<\/form><\/code><\/pre><\/div>\n\n\n\n
watch<\/h3>\n\n\n\n
\u30d5\u30a9\u30fc\u30e0\u306e\u5024\u5909\u66f4\u306e\u76e3\u8996\u304c\u3067\u304d\u307e\u3059\u3002<\/p>\n","protected":false},"excerpt":{"rendered":"
React Hook Form\u3068\u306f\uff1f \u30d5\u30a9\u30fc\u30e0\u30d0\u30ea\u30c7\u30fc\u30b7\u30e7\u30f3\u30e9\u30a4\u30d6\u30e9\u30ea\u3002\u30b3\u30fc\u30c9\u91cf\u3092\u6e1b\u3089\u3057\u3001\u518d\u30ec\u30f3\u30c0\u30ea\u30f3\u30b0\u3082\u6291\u5236\u3057\u3066\u304f\u308c\u3064\u3064\u3001\u9ad8\u6027\u80fd\u306a\u30d0\u30ea\u30c7\u30fc\u30b7\u30e7\u30f3\u3092\u53ef\u80fd\u3068\u3057\u307e\u3059\u3002 \u30a4\u30f3\u30b9\u30c8\u30fc\u30eb \u30a4\u30f3\u30b9\u30c8\u30fc\u30eb\u3067\u304d\u305f\u3089import\u3057\u3066\u5229\u7528\u3067<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jin_ogp_image_url":"","_jin_last_featured_id":0,"footnotes":""},"categories":[21],"tags":[],"class_list":["post-2079","post","type-post","status-publish","format-standard","hentry","category-react"],"_links":{"self":[{"href":"https:\/\/agile-software.net\/index.php?rest_route=\/wp\/v2\/posts\/2079","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/agile-software.net\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/agile-software.net\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/agile-software.net\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/agile-software.net\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=2079"}],"version-history":[{"count":3,"href":"https:\/\/agile-software.net\/index.php?rest_route=\/wp\/v2\/posts\/2079\/revisions"}],"predecessor-version":[{"id":2665,"href":"https:\/\/agile-software.net\/index.php?rest_route=\/wp\/v2\/posts\/2079\/revisions\/2665"}],"wp:attachment":[{"href":"https:\/\/agile-software.net\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=2079"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/agile-software.net\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=2079"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/agile-software.net\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=2079"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}