React的事件處理介紹

事件處理

一開始會先講一些前情提要，詳細可以參考官方的事件處理這篇文章

使用方式

首先需要先知道在JSX上面寫的事件是以camelCase做命名

HTML

<button onclick="activateLasers()">
  Activate Lasers
</button>

JSX

<button onClick={activateLasers}>
  Activate Lasers
</button>

瀏覽器預設行為

一般要取消瀏覽器的預設行為僅需要return false，但在JSX你需要使用preventDefault

HTML

<a href="#" onclick="console.log('The link was clicked.'); return false">
  Click me
</a>

JSX

function ActionLink() {
  function handleClick(e) {
    e.preventDefault();
    console.log('The link was clicked.');
  }

  return (
    <a href="#" onClick={handleClick}>
      Click me
    </a>
  );
}