DEVDEV

コンポーネント洗い出し

Event操作

onClickhandleClickを使い分ける。

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

Export

tsx
interface Props { onClick } export function ButtonComponent({ onClick }: Props) { const handleClick = () => {} return <button onClick={handleClick} /> }

Import

tsx
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を準備し、提供する。