> For the complete documentation index, see [llms.txt](https://zg-zhang.gitbook.io/note/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://zg-zhang.gitbook.io/note/react/offical-website/main-concepts/handling-events.md).

# 事件处理

* React 元素的事件处理和 DOM 元素很相似，但是有一点语法上的不同：
  * React 事件的命名采用小驼峰式，而不是纯小写
  * 使用 JSX 语法时你需要传入一个函数作为事件处理，而不是一个字符串
  * 在 React 你不能通过返回 false 的方式阻止默认行为，你必须显示的使用 preventDefault
  * 在这里，e 是一个合成事件

    \`\`\`html

 Activate Lasers

 [CLick me](/note/react/offical-website/main-concepts/handling-events.md)

````
```jsx harmony

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

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

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

* 在使用 React 时，你一般不需要使用 addEventListener 为已创建的 DOM 元素添加监听器，事实上，你只需要在该元素初始渲染的时候添加监听器即可
* 必须谨慎使用 JSX 回调函数中的 this，在 JavaScript 中，class 的方法默认不会绑定 this。如果你忘记绑定 this 并把它传入了 onClick 当你调用这个函数的时候 this 的值为 undefined
* 这不是 React 特有的行为，这其实与 JavaScript 函数的工作原理有关。通常情况下，如果你没有在方法后面添加 ()，你应该为这个方法绑定 this

  \`\`\`jsx harmony

// 为了在回调中使用 `this`，这个绑定是必不可少的 this.handleClick = this.handleClick.bind(this);

````
* 如果觉的 bind 很麻烦，有两种方式可以解决
    * 实验性的 public class fields 语法，你可以使用 class fields 正确的绑定回调函数  Create React App 默认启用此语法
        * `handleCLick = () => {}`
    * 在回调中使用箭头函数
        * `<button onClick={() => this.handleCLick()}>Click me</button>`
        * 这种方法的问题在于每次重新渲染时都会创建不同的回调函数。在大多数情况下，这没什么问题，但如果该回调函数作为 prop 转入子组件时，
        这些组件可能会进行额外的重新渲染。还是建议使用上面两种办法来避免这类性能问题

## 向事件处理程序传递参数

* 在这两种情况下，React 的事件对象 e 会被作为第二个参数传递
    * 箭头函数的事件对象必须显示传递
    * bind 方式，事件对象以及更多的参数将会隐式的进行传递

```jsx harmony

// 箭头函数
<button onClick={(e) => this.deleteRow(id, e)}>Delete Row</button>

// Function.prototype.bind
<button onclick={this.deleteRow.bind(this, id)}>Delete Row</button>
````