[React] CustomHook 👉 useClick
https://nomadcoders.co受講後にまとめられた内容です.
要素を選択するとclickイベントが発生する可能性があります. useRef userefは、基本的にコンポーネントの一部を選択する方法です. document.getElementByID()を使用するのと同じ
useClickとは?
2.UseClickの作成
import React, { useEffect, useRef } from "react";
const useClick = (onClick) => {
const element = useRef();
useEffect(() => {
if (element.current) {
element.current.addEventListener("click", onClick);
}
return () => {
if (element.current) {
element.current.removeEventListener("click", onClick);
}
}
}, []);
if (typeof onClick !== "function") {
return;
}
return element;
}
export default useClick;3.useClickの使用
import React, { useEffect, useState, useRef } from "react";
import useClick from "./Hooks/useClick";
const App = () => {
const sayHello = () => console.log("hello");
const greeting = useClick(sayHello);
return (
<div className="app">
<h3 ref={greeting}>Hello World</h3>
</div>
)
}
export default App;Reference
この問題について([React] CustomHook 👉 useClick), 我々は、より多くの情報をここで見つけました https://velog.io/@reemrev21/React-CustomHook-useClickテキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol