â ã¯ããã« <div>è¦ç´ ã«onClickã渡ãã¹ãã§ã¯ãªããã¨ãããã¨èãããã¨ã¯ãªãã§ããããï¼ ãã ããªã渡ãã¹ãã§ãªãã®ãï¼ ç解ãã¦ãªãã£ãã®ã§ä»å調ã¹ã¦ã¿ã¾ããã ãµã³ãã«ã³ã¼ã ä»ååä½ç¢ºèªã«å©ç¨ãããµã³ãã«ãªãã¸ããªã®ã³ã¼ãã¯Reactã§æ¸ãã¦ãã¾ãã â çµè«ï¼<div>ã«onClickãå®ç¾©ããã®ããªããã¡ãªã®ãï¼ ã¦ã¼ã¶ã¼ã«ã¨ã£ã¦æä½æ§ã®ä½ããã¿ã³ã«ãªã£ã¦ãã¾ããããã§ãï¼ è¦ããã« UX ãæªããªã£ã¦ãã¾ãããï¼ ãã®çç±ã解説ãã¦ããã¾ãï¼ â æä½æ§ã®ä½ããã¿ã³ã«ãªã£ã¦ãã¾ãçç± å¤§ããï¼ã¤ããã¨èãã¦ãã¾ãã divè¦ç´ 㯠focus ãæããªããã returnãã¼, spaceãã¼ãonClickã«å¤æããªããã ã¹ã¯ãªã¼ã³ãªã¼ãã¼ãèªèããªãè¦ç´ ã ãã â focus ãæããªããã <div>è¦ç´ ã¯focusãæã¡ã¾ããã ãªã®ã§ãtabãã¼ã§è¦ç´ ã«
![ãªã <div> ã« onClick ããã¡ãªã®ãï¼](https://cdn-ak-scissors.b.st-hatena.com/image/square/0b4213542dcbf95b238dcddda40f735275119e86/height=288;version=1;width=512/https%3A%2F%2Fres.cloudinary.com%2Fzenn%2Fimage%2Fupload%2Fs--V0DwaTMt--%2Fc_fit%252Cg_north_west%252Cl_text%3Anotosansjp-medium.otf_55%3A%2525E3%252581%2525AA%2525E3%252581%25259C%252520%25253Cdiv%25253E%252520%2525E3%252581%2525AB%252520onClick%252520%2525E3%252581%25258C%2525E3%252583%252580%2525E3%252583%2525A1%2525E3%252581%2525AA%2525E3%252581%2525AE%2525E3%252581%25258B%2525EF%2525BC%25259F%252Cw_1010%252Cx_90%252Cy_100%2Fg_south_west%252Cl_text%3Anotosansjp-medium.otf_37%3Amatch35%252Cx_203%252Cy_121%2Fg_south_west%252Ch_90%252Cl_fetch%3AaHR0cHM6Ly9zdG9yYWdlLmdvb2dsZWFwaXMuY29tL3plbm4tdXNlci11cGxvYWQvYXZhdGFyLzJlNTBlYTU0YjQuanBlZw%3D%3D%252Cr_max%252Cw_90%252Cx_87%252Cy_95%2Fv1627283836%2Fdefault%2Fog-base-w1200-v2.png)
{{#tags}}- {{label}}
{{/tags}}