- \n
- React \u306e\u30d5\u30a9\u30fc\u30e0\u306e\u57fa\u790e\u3092\u77e5\u308a\u305f\u3044\n
- \n
- \u30d5\u30a9\u30fc\u30e0\u3063\u3066\u306a\u3093\u3060\u308d\u3046<\/li>\n
- Controlled or Uncontrolled \u3068\u305d\u306e\u57fa\u790e<\/li>\n<\/ul>\n<\/li>\n
- react-hook-form \u306b\u3064\u3044\u3066\u77e5\u308a\u305f\u3044\n
- \n
- \u57fa\u790e
\nTips, GROWI.cloud \u3067\u306e\u5c0e\u5165\u4e8b\u4f8b<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<\/p>\n
\u305d\u3082\u305d\u3082\u30d5\u30a9\u30fc\u30e0\u3069\u3046\u3044\u3046\u3082\u306e ?<\/h2>\n
\u30e6\u30fc\u30b6\u3068\u30a2\u30d7\u30ea\u30b1\u30fc\u30b7\u30e7\u30f3\u3067\u306e\u5bfe\u8a71\u3092\u8868\u73fe\u3057\u3066\u3044\u308b\u3082\u306e\u3002\u3044\u308d\u3044\u308d\u7a2e\u985e\u304c\u3042\u308b\u3002<\/p>\n
\u4e00\u756a\u5358\u7d14\u306a\u30d5\u30a9\u30fc\u30e0\u304b\u3089\u8003\u3048\u3066\u307f\u308b<\/h3>\n
- \n
- \n
![\"\"](\"https:\/\/weseek.co.jp\/tech\/wp-content\/uploads\/2021\/09\/simple-form.jpg\")
\n<\/li>\n<\/ul>\n\u540d\u524d\u3092\u5165\u529b\u3057\u305f\u3089 Submit \u3092\u62bc\u3059, \u305d\u306e\u30bf\u30a4\u30df\u30f3\u30b0\u3067\u5165\u529b\u3057\u305f\u3089\u4f55\u304b\u304c\u8d77\u3053\u308b\u3088\u3046\u306a\u30b7\u30f3\u30d7\u30eb\u306a\u30d5\u30a9\u30fc\u30e0<\/p>\n
- \n
- \n
\u30b3\u30fc\u30c9\u306b\u8d77\u3053\u3059\u3068\u3053\u3046\u3044\u3046\u611f\u3058<\/p>\n
<form action=\u201d\/name\u201d method=\u201dpost\u201d>\n<label>\n Name:\n <input type="text" name="name" \/>\n<\/label>\n<input type="submit" value="Submit" \/>\n<\/form><\/code><\/pre>\n- \n
- form \u30bf\u30b0\u3067\u56f2\u3046\n
- \n
- Submit \u6642\u306e\u6319\u52d5\u3092\u66f8\u3044\u3066\u304a\u304f<\/li>\n<\/ul>\n<\/li>\n
- input \u30bf\u30b0\u3067, \u5165\u529b\u6b04\u3068 Submit \u30dc\u30bf\u30f3\u3092\u8868\u73fe<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n
\u3053\u306e\u30d5\u30a9\u30fc\u30e0\u304b\u3089\u308f\u304b\u308b\u3053\u3068<\/h4>\n
- \n
- DOM \u5185\u90e8\u306b\u72b6\u614b\u3092\u6301\u3063\u3066\u3044\u308b\u3053\u3068\n
- \n
- \u4eca\u56de\u3067\u3044\u3046\u3068\u30e6\u30fc\u30b6\u304c\u5165\u529b\u3057\u305f Name<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n
\u30d5\u30a9\u30fc\u30e0\u306b\u3082\u7a2e\u985e\u304c\u3042\u308b<\/h3>\n
![\"\"](\"https:\/\/weseek.co.jp\/tech\/wp-content\/uploads\/2021\/09\/simple-form-others.jpg\")
<\/p>\n- \n
- \u5de6\u306b\u3042\u308b\u306e\u306f\u30bb\u30ec\u30af\u30c8\u30dc\u30c3\u30af\u30b9\n
- \n
- \u30c9\u30ed\u30c3\u30d7\u30c0\u30a6\u30f3\u5f62\u5f0f\u306b\u306a\u3063\u3066\u3044\u3066, \u8907\u6570\u306e\u3046\u3061\u304b\u3089\u4e00\u3064\u9078\u3076\u3088\u3046\u306a\u3082\u306e<\/li>\n<\/ul>\n<\/li>\n
- \u53f3\u306b\u3042\u308b\u30d5\u30a9\u30fc\u30e0\u306f\u540d\u524d, \u51fa\u8eab\u5730, \u30e1\u30e2\u30683\u3064\u306e\u8981\u7d20\u3092\u307e\u3068\u3081\u3066 Submit \u3059\u308b\u3088\u3046\u306a\u3082\u306e<\/li>\n<\/ul>\n
\u30d5\u30a9\u30fc\u30e0\u306f\u30e6\u30fc\u30b6\u3068\u306e\u5bfe\u8a71\u3092\u8868\u73fe\u3059\u308b\u3053\u3068\u304c\u308f\u304b\u308b<\/p>\n
\u5c11\u3057\u8907\u96d1\u306a\u30d5\u30a9\u30fc\u30e0<\/h3>\n
![\"\"](\"https:\/\/weseek.co.jp\/tech\/wp-content\/uploads\/2021\/09\/form-sample.jpg\")
<\/p>\n- \n
- \u3053\u308c\u306f GROWI.cloud \u3067\u4f7f\u3063\u3066\u3044\u308b\u30d5\u30a9\u30fc\u30e0<\/li>\n
- \u5c11\u3057\u8907\u96d1, \u69cb\u6210\u8981\u7d20\u304c\u591a\u3044\n
- \n
- \u4e0a\u4e0b\u3067\u4e00\u3064\u306e\u30d5\u30a9\u30fc\u30e0\u3067\u3042\u308a, \u300c\u72ec\u81ea\u30c9\u30e1\u30a4\u30f3\u3092\u5229\u7528\u3059\u308b\u300d\u3092\u62bc\u3059\u3068\u5207\u308a\u66ff\u308f\u308b<\/li>\n
- \u4e0a\u306e\u30d5\u30a9\u30fc\u30e0\n
- \n
- \u5165\u529b\u4e2d\u306e\u5185\u5bb9\u3092\u3059\u3050\u4e0b\u306b\u8868\u793a\u3059\u308b<\/li>\n
- \u5165\u529b\u3057\u305f\u5185\u5bb9\u304c url \u3068\u3057\u3066\u6b63\u3057\u304f\u306a\u3044\u5834\u5408\u30a8\u30e9\u30fc\u3092\u51fa\u3059 (validation \u3068 error \u8868\u793a)<\/li>\n<\/ul>\n<\/li>\n
- \u4e0b\u306e\u30d5\u30a9\u30fc\u30e0\n
- \n
- \u5165\u529b\u3057\u305f\u5185\u5bb9\u304c url \u3068\u3057\u3066\u6b63\u3057\u304f\u306a\u3044\u5834\u5408\u30a8\u30e9\u30fc\u3092\u51fa\u3059 (validation \u3068 error \u8868\u793a)<\/li>\n
- SSL\u8a3c\u660e\u66f8 (\u30d5\u30a1\u30a4\u30eb) \u3092\u30a2\u30c3\u30d7\u30ed\u30fc\u30c9\u3059\u308b<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n
\u3068\u3044\u3046\u3088\u3046\u306b\u30d5\u30a9\u30fc\u30e0\u306e\u8981\u7d20\u304c\u5897\u3048\u308b\u3053\u3068\u3082\u3042\u308b
\n\u305d\u306e\u969b, \u30d5\u30a9\u30fc\u30e0\u5185\u90e8\u306b\u6301\u3064\u72b6\u614b\u304c\u591a\u3044\u306e\u3067\u8a2d\u8a08\u304c\u5927\u5909\u306b\u306a\u308a\u3084\u3059\u3044
\n\u307e\u305f\u308f\u305a\u3089\u308f\u3057\u3044(e.g. \u5de8\u5927, \u91cd\u3044)\u30d5\u30a9\u30fc\u30e0\u3092\u4f5c\u308b\u3068\u30e6\u30fc\u30b6\u96e2\u308c\u3066\u3057\u307e\u3046\u304b\u3082\u3057\u308c\u306a\u3044<\/p>\n-> \u30d5\u30a9\u30fc\u30e0\u306e\u8a2d\u8a08\u306f\u5927\u4e8b\u306b\u306a\u308b<\/p>\n
\u307e\u3068\u3081\u308b\u3068<\/h3>\n
- \n
- \u30d5\u30a9\u30fc\u30e0\u306f\u30e6\u30fc\u30b6\u3068\u306e\u5bfe\u8a71<\/li>\n
- \u30d5\u30a9\u30fc\u30e0\u3092\u69cb\u6210\u3059\u308b\u8981\u7d20\u304c\u591a\u3044\u306e\u3067\u8a2d\u8a08\u304c\u5927\u4e8b<\/li>\n<\/ul>\n
React \u30d5\u30a9\u30fc\u30e0\u306e\u57fa\u790e<\/h2>\n
React \u306e\u30d5\u30a9\u30fc\u30e0\u5b9f\u88c5\u306f2\u7a2e\u985e\u3042\u308b<\/h3>\n
- \n
- Uncontrolled Component\n
- \n
- \u30d5\u30a9\u30fc\u30e0\u306e\u72b6\u614b\u3092 react \u306e state \u3067\u7ba1\u7406\u3057\u306a\u3044\n
- \n
- DOM \u304c\u7ba1\u7406\u3059\u308b<\/li>\n<\/ul>\n<\/li>\n
- \u6bd4\u8f03\u7684\u9ad8\u30d1\u30d5\u30a9\u30fc\u30de\u30f3\u30b9<\/li>\n
- \u30b7\u30f3\u30d7\u30eb\u306a\u30d5\u30a9\u30fc\u30e0\u3092\u30b7\u30f3\u30d7\u30eb\u306b\u5b9f\u88c5\u3067\u304d\u308b<\/li>\n<\/ul>\n<\/li>\n
- Controlled Component\n
- \n
- \u30d5\u30a9\u30fc\u30e0\u306e\u72b6\u614b\u3092 react \u306e state \u3067\u7ba1\u7406\u3059\u308b<\/li>\n
- \u51dd\u3063\u305f\u30d5\u30a9\u30fc\u30e0\u3092\u4f5c\u308a\u3084\u3059\u3044<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n
Uncontrolled Component<\/h3>\n
\u7c21\u5358\u306a\u30d5\u30a9\u30fc\u30e0\u3092 Uncontrolled Component \u3067\u66f8\u3044\u3066\u307f\u308b<\/p>\n
![\"\"](\"https:\/\/weseek.co.jp\/tech\/wp-content\/uploads\/2021\/09\/react-form-sample.jpg\")
<\/p>\n\u30b3\u30fc\u30c9\u306b\u8d77\u3053\u3059<\/p>\n
const UncontrolledForm = () => {\n const inputRef = React.createRef<HTMLInputElement>() ----------------- \uff11\n const handleSubmit = event => {\n event.preventDefault();\n console.log(inputRef.current.value); ----------------- \uff13\n }\n return (\n <>\n <div>\n <input ref={inputRef} type="text" name="name" \/> ----------------- \uff12\n <button onClick={handleSubmit} >Submit<\/button>\n <\/div>\n <\/>\n );\n}<\/code><\/pre>\nUncontrolled Component \u306f DOM \u3067\u30e6\u30fc\u30b6\u306e\u5165\u529b\u3057\u3066\u3044\u308b\u5024\u3092\u7ba1\u7406\u3059\u308b
\n\u7c21\u5358\u306a3\u3064\u306e\u30b9\u30c6\u30c3\u30d7\u3067\u304b\u3051\u308b<\/p>\n- \n
- inputRef \u3068\u3057\u3066 DOM \u30ce\u30fc\u30c9\u3092\u76e3\u8996\u3059\u308b\u305f\u3081\u306e reference \u3092\u4f5c\u6210\u3059\u308b<\/li>\n
- input \u30bf\u30b0\u306b\u4f5c\u6210\u3057\u305f inputRef \u3092\u767b\u9332\u3057\u3066\u3042\u3052\u308b\n
- \n
- \u3053\u308c\u3067 inputRef \u3092\u901a\u3057\u3066 input \u306b\u30a2\u30af\u30bb\u30b9\u53ef\u80fd<\/li>\n<\/ul>\n<\/li>\n
- submit \u3092\u62bc\u3057\u305f\u30bf\u30a4\u30df\u30f3\u30b0\u3067 onClick event \u304c\u8d70\u308a\u51fa\u3057, inputRef \u3092\u901a\u3057\u3066\u5165\u529b\u3055\u308c\u3066\u3044\u308b\u5024\u3092\u53d6\u5f97<\/li>\n<\/ol>\n
\u3053\u306e\u3088\u3046\u306bref \u3092\u4f5c\u6210, input \u306b\u767b\u9332, \u5165\u529b\u3055\u308c\u3066\u3044\u308b\u5024\u304c\u5fc5\u8981\u306a\u30bf\u30a4\u30df\u30f3\u30b0\u3067 DOM \u304b\u3089\u53d6\u308a\u51fa\u3059
\n\u3068\u3044\u3046\u6d41\u308c\u306b\u306a\u308b<\/p>\nUncontrolled Component\u3000\u306e\u30e1\u30ea\u30c3\u30c8, \u30c7\u30e1\u30ea\u30c3\u30c8<\/h3>\n
- \n
- \u30e1\u30ea\u30c3\u30c8\n
- \n
- \u5fc5\u8981\u306a\u30bf\u30a4\u30df\u30f3\u30b0\u3067\u30d5\u30a3\u30fc\u30eb\u30c9\u304b\u3089\u3068\u3063\u3066\u304f\u308b\u3060\u3051\u306a\u306e\u3067\u8efd\u91cf<\/li>\n
- \u8a18\u8ff0\u91cf\u304c\u5c11\u306a\u3044\n
- \n
- \u305f\u3060\u3057\u30b7\u30f3\u30d7\u30eb\u306a\u3082\u306e<\/li>\n<\/ul>\n<\/li>\n
- \u79fb\u690d\u6027\u304c\u9ad8\u3044\n
- \n
- HTML \u30cd\u30a4\u30c6\u30a3\u30d6\u306e\u5b9f\u88c5\u306b\u8fd1\u3044\u306e\u3067\u4ed6\u306e\u30d5\u30ec\u30fc\u30e0\u30ef\u30fc\u30af\u7b49\u3078\u306e\u79fb\u690d\u304c\u5bb9\u6613\u306b\u306a\u308b<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<\/li>\n
- \u30c7\u30e1\u30ea\u30c3\u30c8\n
- \n
- \u5fc5\u8981\u306a\u30bf\u30a4\u30df\u30f3\u30b0\u3067\u30d5\u30a3\u30fc\u30eb\u30c9\u304b\u3089\u53d6\u308a\u51fa\u3059\u65b9\u5f0f\u306a\u306e\u3067, \u5165\u529b\u3054\u3068\u306b\u4f55\u304b\u3057\u305f\u3044\u5834\u5408\u306b\u3053\u307e\u308b\n
- \n
- \u5165\u529b\u3054\u3068\u306b validation \u3057\u3066 error \u3092\u8868\u793a\u3059\u308b<\/li>\n
- \u30e6\u30fc\u30b6\u306e\u5165\u529b\u306b\u5bfe\u3057\u3066\u30b5\u30b8\u30a7\u30b9\u30c8\u3059\u308b\u3088\u3046\u306a\u5834\u5408<\/li>\n<\/ul>\n<\/li>\n
- \u67d4\u8edf\u6027\u304c\u8584\u3044\n
- \n
- \u5165\u529b\u3055\u308c\u3066\u3044\u308b\u5024\u3092\u5b50\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u306b\u308f\u305f\u3059\u5834\u5408<\/li>\n
- input \u540c\u58eb\u304c\u4f9d\u5b58\u95a2\u4fc2\u3092\u4fdd\u3064\u5834\u5408\n
- \n
- \u3042\u308b\u30c1\u30a7\u30c3\u30af\u30dc\u30c3\u30af\u30b9\u304c\u62bc\u3055\u308c\u3066\u308b\u5834\u5408\u306e\u307f\u306b\u51fa\u3066\u304f\u308b\u30d5\u30a3\u30fc\u30eb\u30c9\u7b49<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n
Controlled Component<\/h3>\n
<\/p>\n\u5148\u7a0b\u3068\u540c\u3058\u30d5\u30a9\u30fc\u30e0\u3092\u30b3\u30fc\u30c9\u306b\u8d77\u3053\u3057\u3066\u307f\u308b<\/p>\n
const ControlledForm = () => {\n const [name, setName] = useState(''); ------------------- 1\n const handleNameChange = (event) => {\n setName(event.target.value);\n };\n const handleSubmit = () => {\n console.log(name); ------------------- 4\n }\n\n return (\n <div>\n <input type="text" value={name} onChange={handleNameChange} \/> --------- 2, 3\n <button onClick={handleSubmit} >Submit<\/button>\n <\/div>\n );\n}<\/code><\/pre>\nControlled Component \u3067\u306f react \u306e state \u3067\u30e6\u30fc\u30b6\u306e\u5165\u529b\u3057\u3066\u3044\u308b\u5024\u3092\u7ba1\u7406\u3059\u308b<\/p>\n
- \n
- \u5165\u529b\u5024\u7528\u306e state \u3092\u4f5c\u6210<\/li>\n
- value={name}\n
- \n
- state \u3068\u30d5\u30a9\u30fc\u30e0\u306e\u5165\u529b\u5024 value \u3092\u540c\u671f<\/li>\n<\/ul>\n<\/li>\n
- onChange={handleNameChange}\n
- \n
- \u30e6\u30fc\u30b6\u304c\u5165\u529b\u3092\u5909\u66f4\u3059\u308b\u305f\u3073\u306b handleNameChange \u3092\u5b9f\u884c\n
- \n
- state \u3092\u30e6\u30fc\u30b6\u306e\u5165\u529b\u5024\u306b\u540c\u671f\u3059\u308b<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<\/li>\n
- \u5165\u529b\u5024\u304c\u5fc5\u8981\u306a\u30bf\u30a4\u30df\u30f3\u30b0\u3067 state \u304b\u3089\u53d6\u5f97\u3059\u308b<\/li>\n<\/ol>\n
Controlled Component \u306f input \u306e change \u30a4\u30d9\u30f3\u30c8\u3067 state \u66f4\u65b0, value \u306b state \u3092\u5165\u308c\u308b\u306e\u304c\u57fa\u672c\u306b\u306a\u308b<\/p>\n
Controlled Component \u306e state \u66f4\u65b0\u306e\u6d41\u308c<\/h3>\n
![\"\"](\"https:\/\/weseek.co.jp\/tech\/wp-content\/uploads\/2021\/09\/controlled.jpg\")
<\/p>\n\u753b\u50cf\u304c 'dog' \u3068\u30e6\u30fc\u30b6\u304c\u5165\u529b\u3059\u308b\u5834\u5408\u306e\u6d41\u308c\u306b\u306a\u308b<\/p>\n
\u6700\u521d state \u306e\u5024\u306f\u3000\u2019\u2019 \u7a7a\u3067\u4f5c\u6210. \u521d\u671f\u5316\u3055\u308c\u308b
\n\u30e6\u30fc\u30b6\u304c 'd' \u3092\u5165\u529b\u3059\u308b\u3068 change \u30a4\u30d9\u30f3\u30c8\u304c\u8d70\u308a handleNameChange \u306b\u3088\u3063\u3066 state \u304c\u66f4\u65b0\u3055\u308c\u308b
\nstate \u306e\u66f4\u65b0\u306b\u3088\u3063\u3066 react \u304c\u518d\u30ec\u30f3\u30c0\u30fc\u3092\u884c\u3046
\n\u6b21\u306b 'o' \u3092\u5165\u529b\u3057\u305f\u30bf\u30a4\u30df\u30f3\u30b0\u3082\u540c\u3058\u4f5c\u696d\u3092\u7e70\u308a\u8fd4\u3057\u518d\u30ec\u30f3\u30c0\u30fc, 'g' \u3092\u5165\u529b\u3057\u30bf\u30a4\u30df\u30f3\u30b0\u3082\u540c\u69d8<\/p>\n\u3068\u3044\u3046\u3088\u3046\u306b state \u304c\u66f4\u65b0\u3055\u308c\u3066\u3044\u304f
\n\u8a00\u3044\u63db\u3048\u308b\u3068 state \u3068\u5165\u529b\u5024\u306f\u5e38\u306b\u540c\u671f\u3055\u308c\u3066\u3044\u308b\u3068\u3044\u3046\u3053\u3068\u3067\u3042\u308a, \u5165\u529b\u5024\u304c\u5909\u308f\u308b\u305f\u3073\u306b\u518d\u30ec\u30f3\u30c0\u30fc\u3055\u308c\u308b\u3068\u3044\u3046\u3053\u3068\u3067\u3042\u308b<\/p>\nControlled Component \u306e\u30e1\u30ea\u30c3\u30c8, \u30c7\u30e1\u30ea\u30c3\u30c8<\/h3>\n
- \n
- \u30e1\u30ea\u30c3\u30c8\n
- \n
- \u5e38\u306b\u5165\u529b\u5024\u3092 state \u306b\u6301\u3063\u3066\u3044\u308b\u3068\u3044\u3046\u3053\u3068\n
- \n
- state \u304c SSOT (Single Source of Truth) \u306b\u306a\u308a, state \u306e\u307f\u4fe1\u7528\u3057\u3066\u304b\u3051\u308b<\/li>\n
- \u5165\u529b\u3059\u308b\u3054\u3068\u306b\u64cd\u4f5c (validation, error \u8868\u793a\u7b49)\u3092\u3057\u3084\u3059\u3044<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<\/li>\n
- \u30c7\u30e1\u30ea\u30c3\u30c8\n
- \n
- \u5165\u529b\u3059\u308b\u305f\u3073\u306b render \u3055\u308c\u308b\u306e\u3067\u91cd\u3044\n
- \n
- \u7279\u306b\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u30c4\u30ea\u30fc\u306e\u4e0a\u4f4d\u306b\u3042\u308b\u3068\u4e0b\u4f4d\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u3082\u518d\u30ec\u30f3\u30c0\u30fc\u3057\u3066\u3057\u307e\u3046<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n
\u307e\u3068\u3081<\/h3>\n
- \n
- \n
Controlled Component, Uncontrolled Component \u3068\u3082\u306b\u4e00\u9577\u4e00\u77ed\u3067\u3042\u308b<\/p>\n
- \n
- Controlled Component \u306e\u307b\u3046\u304c\u67d4\u8edf\u306b\u3067\u304d\u308b\u304c\u30d1\u30d5\u30a9\u30fc\u30de\u30f3\u30b9\u304c\u4f4e\u3044<\/li>\n
- Uncontrolled Componentr \u306e\u307b\u3046\u304c\u3067\u304d\u308b\u3053\u3068\u306f\u5c11\u306a\u3044\u304c\u30d1\u30d5\u30a9\u30fc\u30de\u30f3\u30b9\u304c\u9ad8\u3044<\/li>\n<\/ul>\n<\/li>\n
- \n
\u8003\u3048\u308b\u3053\u3068\u3068\u3057\u3066<\/p>\n
- \n
- Controlled \u306e\u307b\u3046\u304c React \u7684\u306b\u304b\u3051\u308b (state \u3067\u7ba1\u7406)<\/li>\n
- \u30d1\u30d5\u30a9\u30fc\u30de\u30f3\u30b9\u3092\u8003\u3048\u308b\u3068...\n
- \n
- \u57fa\u672c\u306f\u30d1\u30d5\u30a9\u30fc\u30de\u30f3\u30b9\u304c\u9ad8\u304f\u30b7\u30f3\u30d7\u30eb\u306b\u304b\u3051\u308b Uncontrolled \u3067\u5b9f\u88c5<\/li>\n
- \u8907\u96d1\u306a\u30d5\u30a9\u30fc\u30e0\u306f Controlled \u3067\u66f8\u304f\u3068\u3044\u3046\u3053\u3068\u3082
\ne.g. \u5165\u529b\u6bce\u306b validation, \u5165\u529b\u5024\u3092\u5f37\u5236\u3059\u308b, input \u540c\u58eb\u3067\u4f9d\u5b58\u95a2\u4fc2\u7b49<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<\/li>\n<\/ul>\nReact \u3067\u5b9f\u969b\u306b\u30d5\u30a9\u30fc\u30e0\u3092\u66f8\u304f<\/h2>\n
- \n
- \u4e0b\u306e\u3088\u3046\u306a\u30d5\u30a9\u30fc\u30e0\u3092\u5b9f\u88c5\u3057\u3066\u307f\u308b\n
- \n
- input \u306f2\u3064, Name \u3068 Email\n
- \n
- \u305d\u308c\u305e\u308c\u306b\u5165\u529b\u5fc5\u9808\u306e validation, \u5165\u529b\u304c\u306a\u3044\u5834\u5408\u306b\u30a8\u30e9\u30fc\u30e1\u30c3\u30bb\u30fc\u30b8\u3092\u8868\u793a\u3059\u308b<\/li>\n<\/ul>\n<\/li>\n
- Submit \u30dc\u30bf\u30f3\u304c\u3042\u308a\u62bc\u3059\u3068 console \u306b\u5165\u529b\u5024\u3092\u8868\u793a\u3059\u308b<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n
![\"\"](\"https:\/\/weseek.co.jp\/tech\/wp-content\/uploads\/2021\/09\/react-hook-form.jpg\")
<\/p>\n\u30b3\u30fc\u30c9\u306b\u8d77\u3053\u3059
\n(\u4ee5\u4e0b\u3067\u89e3\u8aac\u3059\u308b\u306e\u3067\u305d\u3093\u306a\u306b\u898b\u306a\u304f\u3066 ok \u3067\u3059)<\/p>\nconst Form = () => {\n const [values, setValues] = useState({\n name: '',\n email: ''\n });\n\n const [errors, setErrors] = useState({\n name: '',\n email: ''\n })\n\n const handleChange: (name) => (event) => void = (name) => (event) => {\n const newValues = {\n ...values,\n [name]: event.target.value\n }\n setValues(newValues);\n validate(newValues, name);\n };\n\n const validate = (values, name) => {\n switch(name) {\n case 'name':\n nameValidation(values.name);\n break;\n case 'email':\n emailValidation(values.email);\n break;\n }\n }\n\n const nameValidation = (value: string): void => {\n if (value.length === 0) {\n setErrors({...errors, name: '\u540d\u524d\u306f1\u6587\u5b57\u4ee5\u4e0a'});\n }\n else {\n setErrors({...errors, name: ''});\n }\n }\n\n const emailValidation = (value: string): void => {\n if (value.length === 0) {\n setErrors({...errors, email: 'Email\u306f1\u6587\u5b57\u4ee5\u4e0a'});\n }\n else {\n setErrors({...errors, email: ''});\n }\n }\n\n const handleSubmit = () => {\n console.log(values);\n }\n\n return (\n <>\n <div>\n <h4>Name: <\/h4>\n <input type="text" name="name" value={values.name} onChange={handleChange('name')} \/>\n { errors.name && <span className="text-danger">{ errors.name }<\/span>}\n <h4>Email: <\/h4>\n <input type="email" name="email" value={values.email} onChange={handleChange('email')} \/>\n { errors.email && <span className="text-danger">{ errors.email }<\/span>}\n <div>\n <button onClick={handleSubmit} >Submit<\/button>\n <\/div>\n <\/div>\n <\/>\n );\n}<\/code><\/pre>\n\u7c21\u55ae\u306a\u30d5\u30a9\u30fc\u30e0\u3060\u304c\u968f\u5206\u30b3\u30fc\u30c9\u304c\u9577\u304f\u306a\u3063\u3066\u3057\u307e\u3046<\/p>\n
- \n
- \u30b3\u30fc\u30c9\u3068\u3057\u3066\u306f\n
- \n
- state \u304c2\u3064\n
- \n
- \u5165\u529b\u5024\n
- \n
- name, email \u3092\u6301\u3064\u30aa\u30d6\u30b8\u30a7\u30af\u30c8<\/li>\n<\/ul>\n<\/li>\n
- \u30a8\u30e9\u30fc\u30e1\u30c3\u30bb\u30fc\u30b8\n
- \n
- name, email \u3092\u6301\u3064\u30aa\u30d6\u30b8\u30a7\u30af\u30c8<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<\/li>\n
- \u5165\u529b\u5024 state \u66f4\u65b0\u30e1\u30bd\u30c3\u30c9<\/li>\n
- \u30a8\u30e9\u30fc\u30e1\u30c3\u30bb\u30fc\u30b8 state \u66f4\u65b0\u30e1\u30bd\u30c3\u30c9<\/li>\n
- input \u3054\u3068\u306b validate \u632f\u308a\u5206\u3051\u30e1\u30bd\u30c3\u30c9<\/li>\n
- \u305d\u308c\u305e\u308c\u306e validation \u30e1\u30bd\u30c3\u30c9<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n
\u3068\u3044\u3046\u3088\u3046\u306b\u7d50\u69cb\u8003\u3048\u308b\u3053\u3068\u304c\u591a\u3044
\n\u30d5\u30a3\u30fc\u30eb\u30c9\u304c\u5897\u3048\u308b\u3068\u305d\u306e\u305f\u3073\u306b state, \u30e1\u30bd\u30c3\u30c9\u7b49\u66f8\u304d\u63db\u3048\u308b\u7b87\u6240\u304c\u591a\u3044\u306e\u3067\u8003\u616e\u6f0f\u308c\u3068\u304b\u8d77\u3053\u308a\u305d\u3046<\/p>\n\u7d50\u5c40\u7d20\u306e React \u3060\u3051\u3067\u30d5\u30a9\u30fc\u30e0\u3092\u66f8\u304f\u306e\u306f\u5272\u3068\u5927\u5909\u3068\u3044\u3046\u3053\u3068\u306b
\n\u7279\u306b GROWI.cloud \u3067\u306f GROWI \u3092\u7acb\u3061\u4e0a\u3052\u308b\u969b\u306e\u5165\u529b\u3059\u308b\u30d1\u30e9\u30e1\u30fc\u30bf\u304c\u591a\u304f, \u4f9d\u5b58\u95a2\u4fc2\u3082\u3042\u308b
\n\u305d\u3053\u3067 React Hook Form \u3092\u5c0e\u5165\u3057\u3066\u307f\u308b<\/p>\nReact Hook Form<\/h2>\n
React Hook Form<\/a><\/p>\n
v7.13.0 \u3067\u8aac\u660e\u3057\u307e\u3059<\/p>\n
\u3069\u3046\u3044\u3046\u30e9\u30a4\u30d6\u30e9\u30ea<\/h3>\n
React \u7528\u30d5\u30a9\u30fc\u30e0\u30e9\u30a4\u30d6\u30e9\u30ea<\/p>\n
\u7279\u5fb4\u306f<\/p>\n
- \n
- \u8a18\u8ff0\u304c\u5c11\u306a\u304f, \u30b7\u30f3\u30d7\u30eb\n
- \n
- \u7279\u306b\u30e9\u30a4\u30d6\u30e9\u30ea\u306b\u5bc4\u305b\u305f\u66f8\u304d\u65b9\u3092\u3059\u308b\u3068\u304b\u306a\u308a\u30b7\u30f3\u30d7\u30eb\u306b\u304b\u3051\u308b<\/li>\n<\/ul>\n<\/li>\n
- \u30ec\u30f3\u30c0\u30ea\u30f3\u30b0\u304c\u5c11\u306a\u304f, \u30de\u30a6\u30f3\u30c8\u304c\u65e9\u3044\n
- \n
- Uncontrolled Component \u3092\u30d9\u30fc\u30b9\u306b\u4f5c\u3089\u308c\u3066\u3044\u308b<\/li>\n
- \u4ed6\u306e\u30d5\u30a9\u30fc\u30e0\u30e9\u30a4\u30d6\u30e9\u30ea\u3068\u6bd4\u3079\u3066\u304b\u306a\u308a\u65e9\u3044<\/li>\n<\/ul>\n<\/li>\n
- \u30d1\u30c3\u30b1\u30fc\u30b8\u304c\u5c0f\u3055\u304f\u8efd\u91cf\n
- \n
- \u4f9d\u5b58\u30d1\u30c3\u30b1\u30fc\u30b8 0<\/li>\n<\/ul>\n<\/li>\n
- \u30ea\u30ea\u30fc\u30b9\u304c\u304b\u306a\u308a\u983b\u7e41\u306b\u3055\u308c\u3066\u3044\u308b<\/li>\n<\/ul>\n
\u5c0e\u5165<\/h3>\n
- \n
yarn add react-hook-form<\/code>\n- \n
- yarn add \u6253\u3064\u3060\u3051<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n
\u30b3\u30fc\u30c9\u304b\u3089\u4f7f\u3044\u65b9\u3092\u898b\u308b<\/h3>\n
\u4ee5\u4e0b\u306e\u3055\u3063\u304d\u3068\u540c\u3058\u30d5\u30a9\u30fc\u30e0\u3092 react-hook-form \u3067\u66f8\u3044\u3066\u307f\u308b<\/p>\n
<\/p>\nconst Form = () => {\n const { register, handleSubmit, formState: { errors } } = useForm(); -------------- 1\n const onSubmit = data => { console.log(data) } -------------- 3\n\n return (\n <form onSubmit={handleSubmit(onSubmit)}>\n <h4>Name: <\/h4>\n <input {...register('name', { required: true })} \/> -------------- 2\n { errors.name && <span className="text-danger">\u540d\u524d\u306f1\u6587\u5b57\u4ee5\u4e0a<\/span> } ---------------4\n <h4>Email: <\/h4>\n <input { ...register('email', { required: true })} \/> -------------- 2\n { errors.email && <span className="text-danger">Email\u306f1\u6587\u5b57\u4ee5\u4e0a<\/span> } -------------- 4\n <div>\n <input type="submit" value="Submit"><\/input>\n <\/div>\n <\/form>\n )\n}<\/code><\/pre>\n\u307e\u305a\u30b3\u30fc\u30c9\u304c\u304b\u306a\u308a\u7c21\u7d20\u5316\u3055\u308c\u305f\u306e\u304c\u308f\u304b\u308b
\nstate \u306e\u7ba1\u7406\u304c\u306a\u304f\u306a\u3063\u3066\u3044\u308b<\/p>\nreact-hook-form \u306e\u57fa\u672c\u7684\u306a\u4f7f\u3044\u65b9\u3092\u30b3\u30fc\u30c9\u304b\u3089\u898b\u308b<\/p>\n
- \n
- react-hook-form \u306e\u63d0\u4f9b\u3059\u308b userForm()<\/a> \u304b\u3089\u5fc5\u8981\u306a\u30e1\u30bd\u30c3\u30c9, \u30aa\u30d6\u30b8\u30a7\u30af\u30c8 (\u5f8c\u8ff0) \u3092\u53d6\u5f97<\/li>\n
- input \u30bf\u30b0\u3078\u53d6\u5f97\u3057\u305f register \u3092\u767b\u9332\n
- \n
- register \u306b ref \u304c\u5165\u3063\u3066\u3044\u308b\u306e\u3067 input \u3092\u76e3\u8996\u3067\u304d\u308b<\/li>\n
- register \u306e\u5f15\u6570\u306b\u76e3\u8996\u7528\u306e name , validation \u306e\u30eb\u30fc\u30eb\u3092\u767b\u9332<\/li>\n<\/ul>\n<\/li>\n
- Submit \u30dc\u30bf\u30f3\u3092\u62bc\u3057\u305f\u969b\u306e\u6319\u52d5\u3092\u767b\u9332<\/li>\n
- validation \u306b\u30a8\u30e9\u30fc\u304c\u3042\u308b\u3068 useForm() \u304b\u3089\u53d6\u5f97\u3057\u3066\u3044\u308b errors \u306b\u5165\u3063\u3066\u304f\u308b\u306e\u3067, \u3042\u308b\u5834\u5408\u306f\u30a8\u30e9\u30fc\u8868\u793a<\/li>\n<\/ol>\n
\u57fa\u672c\u7684\u306b\u306f, useForm() \u304b\u3089 register \u3068\u305d\u306e\u4ed6\u5fc5\u8981\u306a\u30e1\u30bd\u30c3\u30c9, \u30aa\u30d6\u30b8\u30a7\u30af\u30c8\u3092\u53d6\u5f97
\nreact-hook-form \u3067\u76e3\u8996\u3059\u308b input \u3078 register \u3092\u767b\u9332
\nuseForm() \u306e\u30e1\u30bd\u30c3\u30c9, \u30aa\u30d6\u30b8\u30a7\u30af\u30c8\u3092\u3088\u3057\u306a\u306b\u4f7f\u3046
\n\u3068\u3044\u3046\u6d41\u308c\u306b\u306a\u308b<\/p>\nFormBuilder<\/h4>\n
react-hook-form \u3067\u306f\u516c\u5f0f\u306b form \u3092\u7c21\u5358\u306b\u3064\u304f\u308c\u308b FormBilder \u3068\u3044\u3046\u3082\u306e\u304c\u63d0\u4f9b\u3055\u308c\u3066\u3044\u308b\u306e\u3067\u3064\u3044\u3067\u306b\u7d39\u4ecb<\/p>\n
https:\/\/react-hook-form.com\/form-builder<\/a><\/p>\n
\u30d6\u30e9\u30a6\u30b6\u4e0a\u3067\u30d5\u30a9\u30fc\u30e0\u306e\u30ec\u30a4\u30a2\u30a6\u30c8\u3084\u57fa\u672c\u7684\u306a validation \u3092\u6307\u5b9a\u3059\u308b\u3053\u3068\u3067\u305d\u308c\u306b\u3042\u3063\u305f\u30b3\u30fc\u30c9\u304c\u751f\u6210\u3055\u308c\u308b<\/p>\n
useForm()<\/h3>\n
\u57fa\u672c\u7684\u306b\u306f\u30c9\u30ad\u30e5\u30e1\u30f3\u30c8<\/a>\u306b\u304b\u3044\u3066\u3042\u308b<\/p>\n
useForm() \u306f\u5f15\u6570\u3092\u53d6\u308b\u3053\u3068\u304c\u3067\u304d\u3066, \u8fd4\u3059\u30e1\u30bd\u30c3\u30c9, \u30aa\u30d6\u30b8\u30a7\u30af\u30c8\u3082\u4fbf\u5229\u306a\u3082\u306e\u304c\u591a\u3044\u306e\u3067\u3044\u304f\u3064\u304b\u7d39\u4ecb
\n\u4ee5\u4e0b\u306f\u7d39\u4ecb\u3059\u308b\u3082\u306e\u3092\u8a18\u8ff0\u3057\u305f\u3082\u306e<\/p>\nuseForm({\n mode: 'onChange',\n defaultValues: {\n name: 'defaultName',\n email: 'defaultEmail',\n },\n shouldUnregister: false\n})\n<\/code><\/pre>\n- \n
- \u5f15\u6570\n
- \n
- mode (\u4e00\u90e8)\n
- \n
- onChange\n
- \n
- \u30e6\u30fc\u30b6\u306e\u5165\u529b\u6bce\u306b register \u3067\u767b\u9332\u3057\u305f validation \u3092\u5b9f\u884c\u3059\u308b<\/li>\n
- \u5185\u90e8\u3067 state \u3092\u4f7f\u308f\u306a\u3044\u306e\u3067 validation \u306e\u7d50\u679c\u304c\u5909\u308f\u308b\u307e\u3067\u518d render \u3055\u308c\u306a\u3044<\/li>\n<\/ul>\n<\/li>\n
- onSubmit\n
- \n
- submit \u6642\u306b validation \u3092\u5b9f\u884c<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<\/li>\n
- defaultValues\n
- \n
- register \u6642\u306b\u767b\u9332\u3057\u305f name \u3067\u5404 input \u306e\u5024\u3092\u4e00\u5143\u7ba1\u7406\u304c\u3067\u304d\u308b<\/li>\n
- \u6700\u521d\u306b render \u3057\u305f\u3068\u304d\u306e\u5024\u306a\u306e\u3067\u518d\u5ea6 defaultValues \u306b\u623b\u3057\u305f\u3044\u5834\u5408\u7b49\u306f\u5225\u9014\u306b resetAPI(\u5f8c\u8ff0) \u3092\u53e9\u304f\u5fc5\u8981\u304c\u3042\u308b<\/li>\n<\/ul>\n<\/li>\n
- shouldUnregister\n
- \n
- input \u304c\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u304b\u3089\u6d88\u3048\u305f\u30bf\u30a4\u30df\u30f3\u30b0\u3067 unregister \u3059\u308b\u304b\u3069\u3046\u304b<\/li>\n
- unregister \u3059\u308b\u3068 input \u306e\u72b6\u614b(\u5165\u529b\u5024\u7b49) \u304c\u518d\u5ea6 input \u304c render \u3055\u308c\u305f\u3068\u304d\u306b\u5f15\u304d\u7d99\u304c\u308c\u306a\u3044<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<\/li>\n
- \u30e1\u30bd\u30c3\u30c9, \u30aa\u30d6\u30b8\u30a7\u30af\u30c8\n
- \n
- register\n
- \n
- input \u3078\u767b\u9332\u3059\u308b\u3082\u306e<\/li>\n
- Reference \u3068 validation rule\u306e\u767b\u9332, \u30a8\u30e9\u30fc\u30e1\u30c3\u30bb\u30fc\u30b8\u3092\u767b\u9332\u3059\u308b\u3053\u3068\u3082\u3067\u304d\u308b<\/li>\n
- validation \u306b\u306f HTML \u6a19\u6e96\u306e rule, \u81ea\u524d\u306e\u30e1\u30bd\u30c3\u30c9\u3082\u767b\u9332\u3067\u304d\u308b<\/li>\n<\/ul>\n<\/li>\n
- errors\n
- \n
- register \u6642\u306b\u767b\u9332\u3057\u305f validation \u306b\u30a8\u30e9\u30fc\u304c\u3042\u308b\u3068\u3053\u306e\u30aa\u30d6\u30b8\u30a7\u30af\u30c8\u306b error \u306e input \u304c\u5165\u308b<\/li>\n<\/ul>\n<\/li>\n
- reset\n
- \n
- \u30d5\u30a9\u30fc\u30e0\u306e\u5024\u3092 defaultValues \u306b\u623b\u3059<\/li>\n
- \u30aa\u30d6\u30b8\u30a7\u30af\u30c8\u3092\u5f15\u6570\u306b\u308f\u305f\u3059\u3053\u3068\u3067 values \u3092\u6307\u5b9a\u3059\u308b\u3053\u3068\u3082\u3067\u304d\u308b<\/li>\n<\/ul>\n<\/li>\n
- watch\n
- \n
- \u6307\u5b9a\u3057\u305f input\/inputs \u3092\u76e3\u8996\u3059\u308b<\/li>\n
- readonly \u306a\u5165\u529b\u5024\u306e state \u307f\u305f\u3044\u306a\u3082\u306e\u3067\u3053\u308c\u3092\u4f7f\u3046\u5834\u5408\u518d\u30ec\u30f3\u30c0\u30fc\u3055\u308c\u308b<\/li>\n<\/ul>\n<\/li>\n
- getValues\n
- \n
- \u30d5\u30a9\u30fc\u30e0\u306e\u5024\u3092\u53d6\u5f97<\/li>\n<\/ul>\n<\/li>\n
- trigger\n
- \n
- \u624b\u52d5 validation \u5b9f\u884c\u30e1\u30bd\u30c3\u30c9<\/li>\n<\/ul>\n<\/li>\n
- formState\n
- \n
- isDirty, isValid, isSubmitted \u7b49\u306e\u30d5\u30a9\u30fc\u30e0\u306e\u72b6\u614b\u3092\u6301\u3064<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n
\u5b9f\u969b\u306e GROWI.cloud<\/a> \u3067\u306e\u4f7f\u3044\u65b9<\/h2>\n
\u57fa\u672c\u7684\u306a\u4f7f\u3044\u65b9\u306f\u524d\u8ff0\u306e\u901a\u308a, \u5b9f\u969b\u306b GROWI.cloud<\/a> \u3067\u4f7f\u3063\u3066\u3044\u3066, \u5c11\u3057\u56f0\u3063\u305f\u5834\u9762\u3084\u305d\u306e\u5bfe\u51e6\u306b\u3064\u3044\u3066<\/p>\n
\u30cd\u30b9\u30c8\u3057\u305f\u30d5\u30a9\u30fc\u30e0\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8<\/h3>\n
\u30cd\u30b9\u30c8\u3057\u305f\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u3068\u306f<\/h4>\n
Input \u304c\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u306e\u4e2d\u306b\u3044\u3066\u30cd\u30b9\u30c8\u3057\u3066\u3044\u308b\u5834\u5408<\/p>\n
\u4f8b\u3048\u3070\u4ee5\u4e0b\u306e\u3088\u3046\u306a\u69cb\u6210<\/p>\n
<form onSubmit={handleSubmit(onSubmit)}>\n <NestedInputA><NestedInputA \/>\n <NestedInputB><NestedInputB \/>\n <input type="submit" value="Submit"><\/input>\n<\/form><\/code><\/pre>\nNestedInputA\/B \u306f\u305d\u308c\u305e\u308c input \u30bf\u30b0\u3092\u5185\u90e8\u306b\u6301\u3063\u3066\u3044\u308b
\nuseForm() \u304b\u3089\u53d6\u5f97\u3057\u305f\u3082\u306e\u3092\u4e0b\u4f4d\u306e input \u3078\u6e21\u3059\u5fc5\u8981\u304c\u3042\u308b
\n\u5358\u7d14\u306a\u5b9f\u88c5\u3060\u3068\u4ee5\u4e0b\u306b\u306a\u308b<\/p>\n<form onSubmit={handleSubmit(onSubmit)}>\n <NestedInputA register={register} errors={errors}><\/NestedFormA>\n <NestedInputB register={register} errors={errors}><\/NestedFormB>\n <input type="submit" value="Submit"><\/input>\n<\/form><\/code><\/pre>\nuseForm() \u304b\u3089\u53d6\u5f97\u3057\u305f\u3082\u306e\u3092 props \u3068\u3057\u3066\u4e0b\u4f4d\u306e\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u306b\u6e21\u3057\u3066\u3044\u308b<\/p>\n
- \n
- \u3057\u304b\u3057\u3053\u308c\u3060\u3068\u5197\u9577\u3055\u304c\u3042\u3063\u3066\u56f0\u308b\n
- \n
- useForm() \u306e\u30aa\u30d6\u30b8\u30a7\u30af\u30c8\u3092\u6bce\u56de\u6e21\u3055\u306a\u3044\u3068\u3044\u3051\u306a\u3044<\/li>\n
- input \u304c\u5b50\u3088\u308a\u4e0b\u306b\u3042\u3063\u305f\u5834\u5408\u3055\u3089\u306b\u305d\u306e\u5b50\u306b\u6e21\u3057\u305f\u308a\u3068\u826f\u304f\u306a\u3044\u30d0\u30b1\u30c4\u30ea\u30ec\u30fc<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n
useFormContext()<\/a><\/h4>\n
- \u3057\u304b\u3057\u3053\u308c\u3060\u3068\u5197\u9577\u3055\u304c\u3042\u3063\u3066\u56f0\u308b\n
- isDirty, isValid, isSubmitted \u7b49\u306e\u30d5\u30a9\u30fc\u30e0\u306e\u72b6\u614b\u3092\u6301\u3064<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n
- register\n
- onChange\n
- mode (\u4e00\u90e8)\n
- \u5f15\u6570\n
- input \u30bf\u30b0\u3078\u53d6\u5f97\u3057\u305f register \u3092\u767b\u9332\n
- react-hook-form \u306e\u63d0\u4f9b\u3059\u308b userForm()<\/a> \u304b\u3089\u5fc5\u8981\u306a\u30e1\u30bd\u30c3\u30c9, \u30aa\u30d6\u30b8\u30a7\u30af\u30c8 (\u5f8c\u8ff0) \u3092\u53d6\u5f97<\/li>\n
- yarn add \u6253\u3064\u3060\u3051<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n
- \u8a18\u8ff0\u304c\u5c11\u306a\u304f, \u30b7\u30f3\u30d7\u30eb\n
- \u5165\u529b\u5024\n
- state \u304c2\u3064\n
- \u30b3\u30fc\u30c9\u3068\u3057\u3066\u306f\n
- input \u306f2\u3064, Name \u3068 Email\n
- \u4e0b\u306e\u3088\u3046\u306a\u30d5\u30a9\u30fc\u30e0\u3092\u5b9f\u88c5\u3057\u3066\u307f\u308b\n
- \n
- \u7279\u306b\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u30c4\u30ea\u30fc\u306e\u4e0a\u4f4d\u306b\u3042\u308b\u3068\u4e0b\u4f4d\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u3082\u518d\u30ec\u30f3\u30c0\u30fc\u3057\u3066\u3057\u307e\u3046<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n
- \u5165\u529b\u3059\u308b\u305f\u3073\u306b render \u3055\u308c\u308b\u306e\u3067\u91cd\u3044\n
- \u5e38\u306b\u5165\u529b\u5024\u3092 state \u306b\u6301\u3063\u3066\u3044\u308b\u3068\u3044\u3046\u3053\u3068\n
- \u30e1\u30ea\u30c3\u30c8\n
- \u30e6\u30fc\u30b6\u304c\u5165\u529b\u3092\u5909\u66f4\u3059\u308b\u305f\u3073\u306b handleNameChange \u3092\u5b9f\u884c\n
- \u3042\u308b\u30c1\u30a7\u30c3\u30af\u30dc\u30c3\u30af\u30b9\u304c\u62bc\u3055\u308c\u3066\u308b\u5834\u5408\u306e\u307f\u306b\u51fa\u3066\u304f\u308b\u30d5\u30a3\u30fc\u30eb\u30c9\u7b49<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n
- \u5fc5\u8981\u306a\u30bf\u30a4\u30df\u30f3\u30b0\u3067\u30d5\u30a3\u30fc\u30eb\u30c9\u304b\u3089\u53d6\u308a\u51fa\u3059\u65b9\u5f0f\u306a\u306e\u3067, \u5165\u529b\u3054\u3068\u306b\u4f55\u304b\u3057\u305f\u3044\u5834\u5408\u306b\u3053\u307e\u308b\n
- \u30e1\u30ea\u30c3\u30c8\n
- \u30d5\u30a9\u30fc\u30e0\u306e\u72b6\u614b\u3092 react \u306e state \u3067\u7ba1\u7406\u3057\u306a\u3044\n
- Uncontrolled Component\n
- \u5de6\u306b\u3042\u308b\u306e\u306f\u30bb\u30ec\u30af\u30c8\u30dc\u30c3\u30af\u30b9\n
- \u4eca\u56de\u3067\u3044\u3046\u3068\u30e6\u30fc\u30b6\u304c\u5165\u529b\u3057\u305f Name<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n
- DOM \u5185\u90e8\u306b\u72b6\u614b\u3092\u6301\u3063\u3066\u3044\u308b\u3053\u3068\n
- form \u30bf\u30b0\u3067\u56f2\u3046\n
- \n
- \n
- \u57fa\u790e