『新手學習React』- React Basic_Event Handlers

荒廢了一陣子，現在回來了～～

Event

Event是什麼應該不用再特別介紹了吧，下面會簡單介紹我們在JavaScript上寫的跟用React寫的有什麼差異性。

React 跟 JavaScript 的不同

在我們寫JavaScript時，如果要完成事件我們都必須掛上一個監聽器 addEventListener，去執行我們的事件，但在React 中事件的綁定是直接寫在 JSX 元件上的，並不需要透過 addEventListener 的方式進行監聽，但有幾個地方是我們要去調整的：

• HTML DOM 的 event handler (事件處理函式) 屬性 (attribute) 名稱都是小寫的，但 React 是使用 camelCase。React 已經有事先封裝好一些事件類型像是：onChick, onChange等等

• HTML DOM 的 event handler 屬性的值是一個字串 (string)，但在 JSX 中是一個函數 (function)

  //HTML
  <button onclick="activateLasers()">
    Activate Lasers
  </button>
  
  //React
  <button onClick={activateLasers}>
    Activate Lasers
  </button>

  💡 注意：如果是onClick={event handler} 這只是指向這個 function，他會等到我們真的點擊後才會執行，如果我們是這樣打onClick={event handler()}他就會變成執行這行時直接執行。

• 在 React 的事件處理函式中，你不能像在 DOM 可以 return false 代表停止瀏覽器預設行為，你需要明確的 call preventDefault()

  const submitHandler = (event: React.FormEvent) => {
      event.preventDefault();
      const inputValuesData = inputValues;
      isValid();
      if (formIsValid.current !== "true") return;
      getCurrentCtx(inputValues);
    };

Event Object

當給 DOM 綁定事件處理函數時，函數會自動傳入一個 event，這個 event 紀錄了當前事件的屬性和方法，在 React 中，雖然 event 不是瀏覽器提供的，但是由 React 將原生瀏覽器的 event 進行封裝，對外提供一個 API，這裡就無須考慮瀏覽器的兼容性，與原生瀏覽器處理事件方法一樣(像是event.preventDefault(), event.stopPropatation)

介紹完差異後，我們來用一個官網上的實際案例來說明：

Adding event handlers

今天我們要建立 event handlers時，我們會先宣告一個函數，然後將其作為 prop 傳遞給 JSX。

export default function Button() {
  function handleClick() {
    alert('You clicked me!');
  }

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

也可以使用 arrow function:

<button onClick={() => {
  alert('You clicked me!');
}}>

這邊再提醒一次：如果是 onClick={event handler} 這只是指向這個 function，他會等到我們真的點擊後才會執行，如果我們是這樣打 onClick={event handler()} 他就會變成執行這行時直接執行。

Propagation

Stopping :

function Button({ onClick, children }) {
  return (
    <button onClick={e => {
      e.stopPropagation();
      onClick();
    }}>
      {children}
    </button>
  );
}

export default function Toolbar() {
  return (
    <div className="Toolbar" onClick={() => {
      alert('You clicked on the toolbar!');
    }}>
      <Button onClick={() => alert('Playing!')}>
        Play Movie
      </Button>
      <Button onClick={() => alert('Uploading!')}>
        Upload Image
      </Button>
    </div>
  );
}

當你點擊一個按鈕時：

1. React 調用onClick<button>傳遞給.
2. 該處理程序在 中定義Button，它執行以下操作：
   • 呼叫e.stopPropagation()，防止事件進一步冒泡。
   • 調用onClickToolbar函數，它是從組件傳遞的 prop。
3. 該組件中定義的函數Toolbar顯示按鈕自己的警報。
4. 由於傳播已停止，因此父級<div>onClick的處理程序不會運行。

不要混淆e.stopPropagation()和e.preventDefault()。兩者差別：

• e.stopPropagation()停止觸發附加到上述標籤的事件處理程序。
• e.preventDefault()阻止少數事件的默認瀏覽器行為。