イベントと条件付きレンダリング

ユーザーの操作に反応し、条件に応じて要素を表示したり隠したりしましょう。

8 分 · 3 問

イベント とはユーザーの操作のことです。クリック、キーの押下、フォームの送信など。Reactでは、特別なpropに 関数 を渡すことでイベントを受け取ります。クリックなら onClick、入力なら onChange、といった具合です。キャメルケース の綴りに注意してください。HTMLのような onclick ではなく、Cが大文字の onClick です。

function AlertButton() {
  function handleClick() {
    alert("Button clicked!");
  }

  return (
    <button onClick={handleClick}>
      Click here
    </button>
  );
}

このレッスンの二つ目の道具は 条件付きレンダリング、言い換えれば条件に応じて異なるものを表示することです。「営業中」か「閉店」かを示すお店の看板のように、コンポーネントは何を表示するかを選べます。もっともよく使う道具は 三項演算子 です。condition ? valueIfTrue : valueIfFalse は「もし……なら……そうでなければ……」をコンパクトに書く方法です。

function Status({ isLoggedIn }) {
  return (
    <p>
      {isLoggedIn ? "Welcome!" : "Please sign in."}
    </p>
  );
}

では、何かを表示する か、まったく何も表示しない 場合はどうでしょう？ && 演算子を使います。condition && element では、要素は条件がtrueのときだけ表示されます。falseなら、Reactは単に何も描画せず、エラーも出しません。

function Cart({ itemCount }) {
  return (
    <div>
      <h3>My cart</h3>
      {itemCount > 0 && <p>{itemCount} item(s)</p>}
    </div>
  );
}

理解度チェック

このレッスンの要点をしっかり覚えているか確認しましょう。

1. Reactでクリックに反応するにはどのpropを使いますか？
   • onclick
   • onClick
   • clickEvent
2. なぜ onClick={handleClick} をかっこなしで書くのですか？
   • JSXではかっこが禁止されているから
   • ページの読み込みを速くするため
   • 描画時ではなくクリック時に関数が実行されるようにするため
3. isVisible が false のとき、{isVisible && <p>Info</p>} は何を表示しますか？
   • まったく何も表示しない
   • それでもInfoの段落が表示される
   • Reactがエラーメッセージを表示する