{"id":13269,"date":"2021-02-27T17:40:49","date_gmt":"2021-02-27T08:40:49","guid":{"rendered":"http:\/\/www.code-magagine.com\/?p=13269"},"modified":"2023-05-27T22:11:01","modified_gmt":"2023-05-27T13:11:01","slug":"%e3%80%90react%e3%80%91%e3%80%8cuseref%e3%80%8d%e3%81%ae%e5%ae%9f%e8%b7%b5%e7%9a%84%e3%81%aa%e4%bd%bf%e3%81%84%e6%96%b9","status":"publish","type":"post","link":"http:\/\/www.code-magagine.com\/?p=13269","title":{"rendered":"\u3010React\u3011\u300cuseRef\u300d\u306e\u5b9f\u8df5\u7684\u306a\u4f7f\u3044\u65b9"},"content":{"rendered":"<h2>\u7279\u5fb4<\/h2>\n<p><span style=\"color: #ff0000;\"><strong>\u5024\u304c\u66f4\u65b0\u3055\u308c\u3066\u3082\u5dee\u5206\u691c\u77e5\u3055\u308c\u306a\u3044<\/strong><\/span>\u3053\u3068\u3002<\/p>\n<h2>\u3088\u304f\u4f7f\u308f\u308c\u308b\u30b1\u30fc\u30b9<\/h2>\n<p>form\u3067input\u5165\u529b\u6642\u306e\u30ec\u30f3\u30c0\u30ea\u30f3\u30b0\u3092\u9632\u3050\u76ee\u7684\u3067\u4f7f\u308f\u308c\u307e\u3059\u3002useRef\u3092\u5229\u7528\u3057\u3066\u30ec\u30f3\u30c0\u30ea\u30f3\u30b0\u3092\u6291\u3048\u305f\u30e9\u30a4\u30d6\u30e9\u30ea\u304c<span style=\"color: #ff0000;\"><strong>\u300creact-hooks-form\u300d<\/strong><\/span>\u3067\u3059\u3002<\/p>\n<p>\u306a\u304a\u3001useRef\u306fDOM\u306e\u53c2\u7167\u306b\u9650\u3089\u305a\u306a\u3093\u3067\u3082\u597d\u304d\u306a\u3082\u306e\u3092\u5165\u308c\u308b\u3053\u3068\u304c\u3067\u304d\u307e\u3059\u3002\u306a\u306e\u3067\u518d\u30ec\u30f3\u30c0\u30ea\u30f3\u30b0\u3092\u8d77\u3053\u3057\u305f\u304f\u306a\u3044\u3051\u3069\u5024\u306e\u66f4\u65b0\u306f\u3057\u305f\u3044\u306a\u3069\u306e\u30d1\u30d5\u30a9\u30fc\u30de\u30f3\u30b9\u30c1\u30e5\u30fc\u30cb\u30f3\u30b0\u306b\u3082\u4f7f\u3048\u305f\u308a\u3057\u307e\u3059\u3002(\u4f8b\u3048\u3070\u3001timer\u3084API\u9001\u4fe1\u6642\u306e\u5024\u306a\u3069\uff09<\/p>\n<p>\u5f8c\u306f\u3001\u7d14\u7c8b\u306bReact\u304b\u3089\u751fDOM\u306b\u5bfe\u3057\u3066\u547d\u4ee4(\u901a\u5e38\u306eJavaScriptAPI)\u3092\u5b9f\u884c\u3057\u305f\u3044\u5834\u5408\u306a\u3069\u306b\u3088\u304f\u4f7f\u308f\u308c\u307e\u3059\u3002\uff08\u4f8b\u3048\u3070\u3001clientHeight\u3067\u751fDOM\u306e\u9ad8\u3055\u3092\u53d6\u5f97\u3057\u3066CSS\u306e\u5236\u5fa1\u3092\u52a0\u3048\u308b\u306a\u3069\uff09<\/p>\n<h2>\u6ce8\u610f\u70b9<\/h2>\n<p>\u30d5\u30a9\u30fc\u30e0\u306e\u5165\u529b\u3067\u3042\u308c\u3070\u3042\u304f\u307e\u3067\u30b5\u30d6\u30df\u30c3\u30c8\u6642\u306b\u30d0\u30ea\u30c7\u30fc\u30b7\u30e7\u30f3\u3092\u884c\u3046\u3068\u3044\u3046\u6319\u52d5\u306b\u306a\u3063\u3066\u3057\u307e\u3046\u306e\u3067\u3001<span style=\"color: #ff0000;\"><strong>\u5165\u529b\u4e2d\u306b<\/strong><strong>\u30ea\u30a2\u30eb\u30bf\u30a4\u30e0\u3067\u30d0\u30ea\u30c7\u30fc\u30b7\u30e7\u30f3\u3092\u884c\u3044\u305f\u3044<\/strong><\/span>\u306a\u3069\u306e\u8981\u4ef6\u304c\u3042\u308b\u5834\u5408\u306f\u5c11\u3057\u30ab\u30b9\u30bf\u30de\u30a4\u30ba\u3057\u306a\u3051\u308c\u3070\u306a\u3089\u304f\u306a\u3063\u3066\u3057\u307e\u3046\u306e\u3067\u6c17\u3092\u4ed8\u3051\u307e\u3057\u3087\u3046\u3002<\/p>\n<h2>\u30b5\u30f3\u30d7\u30eb<\/h2>\n<p>\u516c\u5f0f\u30b5\u30a4\u30c8\u306b\u8f09\u3063\u3066\u3044\u308b\u30b5\u30f3\u30d7\u30eb\u306b\u306a\u308a\u307e\u3059\u3002<\/p>\n<pre class=\"lang:default decode:true\">function TextInputWithFocusButton() {\r\n  const inputEl = useRef(null);\r\n  const onButtonClick = () =&gt; {\r\n    \/\/ `current` points to the mounted text input element\r\n    inputEl.current.focus();\r\n  };\r\n  return (\r\n    &lt;&gt;\r\n      &lt;input ref={inputEl} type=\"text\" \/&gt;\r\n      &lt;button onClick={onButtonClick}&gt;Focus the input&lt;\/button&gt;\r\n    &lt;\/&gt;\r\n  );\r\n}<\/pre>\n<p>input\u8981\u7d20\u306eref\u5c5e\u6027\u306buseRef\u3067\u5ba3\u8a00\u3057\u305f\u5024\u3092\u8a2d\u5b9a\u3057\u307e\u3059\u3002\u305d\u3046\u3059\u308b\u3053\u3068\u3067<span style=\"color: #ff0000;\"><strong>input\u8981\u7d20\u3078\u306e\u95a2\u9023\u4ed8\u3051\u3092\u3059\u308b\u3053\u3068\u304c\u53ef\u80fd<\/strong><\/span>\u3067\u3059\u3002<\/p>\n<p>\u8981\u306f\u3001<span style=\"color: #ff0000;\"><strong>\u30bd\u30fc\u30b9\u5185\u306einputEl\u3068\u3044\u3046\u5909\u6570\u7d4c\u7531\u3067input\u8981\u7d20\u3078\u306e\u30a2\u30af\u30bb\u30b9\u304c\u53ef\u80fd<\/strong><\/span>\u306b\u306a\u308a\u307e\u3059\u3002<\/p>\n<p>\u306a\u304a\u3001\u30b5\u30f3\u30d7\u30eb\u306b\u306f\u8a18\u8ff0\u306f\u3057\u3066\u3044\u307e\u305b\u3093\u304c\u3001Redux\u3092\u4f7f\u3063\u3066\u3044\u308b\u5834\u5408\u306a\u3069\u306f\u3001POST\u30dc\u30bf\u30f3\u3092\u62bc\u3057\u305f\u969b\u306a\u3069\u306buseRef\u3067\u53d6\u5f97\u3057\u305f\u4fdd\u6301\u3057\u3066\u3044\u308b\u5024\uff08inputEl.current.value\uff09\u3092\u305d\u306e\u307e\u307edispatch\u3057\u3066\u5024\u3092\u683c\u7d0d\u3057\u307e\u3059\u3002<\/p>\n","protected":false},"excerpt":{"rendered":"\u7279\u5fb4 \u5024\u304c\u66f4\u65b0\u3055\u308c\u3066\u3082\u5dee\u5206\u691c\u77e5\u3055\u308c\u306a\u3044\u3053\u3068\u3002 \u3088\u304f\u4f7f\u308f\u308c\u308b\u30b1\u30fc\u30b9 form\u3067input\u5165\u529b\u6642\u306e\u30ec\u30f3\u30c0\u30ea\u30f3\u30b0\u3092\u9632\u3050\u76ee\u7684\u3067\u4f7f\u308f\u308c\u307e\u3059\u3002useRef\u3092\u5229\u7528\u3057\u3066\u30ec\u30f3\u30c0\u30ea\u30f3\u30b0\u3092\u6291\u3048\u305f\u30e9\u30a4\u30d6\u30e9\u30ea\u304c\u300creact-hooks-form\u300d [&hellip;]","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[116],"tags":[],"_links":{"self":[{"href":"http:\/\/www.code-magagine.com\/index.php?rest_route=\/wp\/v2\/posts\/13269"}],"collection":[{"href":"http:\/\/www.code-magagine.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/www.code-magagine.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/www.code-magagine.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/www.code-magagine.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=13269"}],"version-history":[{"count":10,"href":"http:\/\/www.code-magagine.com\/index.php?rest_route=\/wp\/v2\/posts\/13269\/revisions"}],"predecessor-version":[{"id":20431,"href":"http:\/\/www.code-magagine.com\/index.php?rest_route=\/wp\/v2\/posts\/13269\/revisions\/20431"}],"wp:attachment":[{"href":"http:\/\/www.code-magagine.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=13269"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/www.code-magagine.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=13269"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/www.code-magagine.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=13269"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}