24、React 事件处理全解析

React 事件处理全解析

1. 事件处理函数的定义方式

在 React 中，事件处理函数的定义有多种方式。例如，你可以直接在 JSX 中定义一个多行的事件处理函数：

return ( 
  <button onClick={() => { 
    setCounter(count => count + 1); 
    toggleState(); 
  }}>Button</button> 
); 

不过，有些开发者可能觉得这样的代码有点杂乱，他们更喜欢在返回 JSX 之前，将这样的多行事件处理函数单独定义在一个变量中：

const onClick = () => { 
  setCounter(count => count + 1); 
  toggleState(); 
}; 
return <button onClick={onClick}>Button</button>; 

2. 事件对象

当事件发生时，事件处理函数会被调用，并且会传入一个参数——事件对象。这在普通的 HTML、JavaScript 以及 React 中都是如此。

2.1 通用事件对象属性

事件对象通常有两个重要的属性：
- target 属性 ：指向事件的目标 HTML 节点。
- type 属性 <