React onClick事件

基本介紹

• onClick 事件用於監聽使用者的點擊行為，通常綁定在按鈕、連結或其他可點擊元素上。
• 在 React 中，onClick 屬性使用駝峰式命名，並接收一個函式作為事件處理器。

function ClickExample() {
  // 定義 onClick 的事件處理器
  const handleClick = () => {
    console.log("按鈕被點擊了！");
  };

  return (
    <div>
      <button onClick={handleClick}>
        點擊我
      </button>
    </div>
  );
}

export default ClickExample;

好，現在如果事件處理器具有參數的話，我們就必須將這個帶有參數的事件處理器函式包裝在函式表達式或箭頭函式，否則會直接調用函式。這邊我們使用箭頭函式。

function ClickExample() {
  // 定義 onClick 的事件處理器
  const handleClick = (name) => {
    console.log(`按鈕被${name}點擊了！`);
  };

  return (
    <div>
      <button onClick={() => handleClick("Bob")}>
        點擊我
      </button>
    </div>
  );
}

export default ClickExample;

再舉一個實際例子:

function MyButton() {
  // 定義事件處理器，接收合成事件物件作為參數
  const handleClick = (event) => {
    // 如果需要取消預設行為，可呼叫 event.preventDefault()
    console.log("按鈕被點擊了！", event);
    // 我們也可以進行以下操作
    event.target.textContent = "按鈕被點擊了";
  };

  return (
    // 使用駝峰式命名的 onClick 屬性，並將事件處理器傳入
    // 這樣寫也行: <button onClick={handleClick}>
    <button onClick={(event) => handleClick(event)}>
      點擊我
    </button>
  );
}

export default MyButton;

• 當該元素被點擊時，React 會觸發對應的事件處理器，並傳入一個合成事件 (SyntheticEvent) 物件，此物件封裝了原生事件的屬性與方法。

以下是按下按鈕後的輸出: