問題一覧に戻る
初級イベント処理
問題29: onClickイベント

ボタンクリックのイベント処理を学びます。基本的なインタラクションの実装方法を理解しましょう。

import React from 'react';

function ClickExample() {
  // クリックハンドラー
  const handleClick = () => {
    alert("クリック！");
  };

  // パラメータ付き関数
  const greet = (name) => {
    alert(`こんにちは、${name}さん！`);
  };

  return (
    <div>
      {/* 基本的なクリック */}
      <button ={handleClick}>クリック</button>
      
      {/* インラインクリック */}
      <button onClick={ => alert("インライン")}>直接</button>
      
      {/* パラメータ付きクリック */}
      <button onClick={() => ("太郎")}>挨拶</button>
    </div>
  );
}

export default ClickExample;
···