Event 操作

onClickとhandleClickを使い分ける。

• onClickは、実際のイベントである。
• handleClickは、それをどう扱うかを記述する関数を用意する。

Export

interface Props {
  onClick;
}

export function ButtonComponent({ onClick }: Props) {
  const handleClick = () => {};

  return <button onClick={handleClick} />;
}

Import

import { ButtonComponent } from '...'

const handleClick = () => {}
<ButtonComponent onClick={handleClick}>

上記のような形になるように構築する。

Event の制御

• event.preventDefault()
• event.stopPropagation()

Event.preventDefault() - Web API | MDN

Event.stopPropagation() - Web API | MDN

EventListener

• capture
• once

EventTarget.addEventListener() - Web API | MDN

Style

• トップ要素に Margin を入れない。
• className や styles の API を準備し、提供する。