前言

上一小节，介绍了react中的组件，介绍了组件的导入导出与渲染，本节我们继续学习一下react中的事件。

事件

事件表示要去执行的逻辑，事件名称一般以handle开头。在react中绑定事件需要注意不要加上括号，加上括号代表着立即执行这个函数，得到的是函数返回结果，没有括号才会在事件触发时候执行。prop传递的事件可以自定义，prop自定义事件习惯以on开头，表示这是事件。事件冒泡与事件捕获，当组件之间进行嵌套时，可以用e.stopPropagation来组织冒泡事件。用e.preventDefault阻止默认事件。vue中用stop修饰符阻止冒泡，用prevent阻止默认事件。

组件往往需要添加事件来进行交互，事件的添加就是原生js事件变成驼峰写法。

<button onClick={clickButton}></button>

函数无需加上小括号去调用，react会自己调用。

绑定事件的目的是交互，所以我们要能去改变界面的数据，react提供了useState这个hook，它能够给组件添加状态变量，我们可以通过事件去修改该变量，并把变量展示到页面，达到改变界面数据的效果。具体的语法：

const [state, setState] = useState(initialState);

• state:变量名称
• setState:触发事件。state与setState是通过解构赋值获取的
• initialState:初始值

useState在页面使用时，需要通过import导入。

import { useState } from 'react';
const [count,setCount] = useState(0)
function clickCount(){
setCount(count++)
}
return (
<button onClick={clickCount}>
点击 {count} 次
</button>
);

事件传参

日常开发中事件一般会传递参数，前面我们提到过react直接绑定函数不能加括号，因为react的事件都是通过封装原生事件得到的合成事件。以上面为例函数传参写出clickCount(a)肯定是不对，既然函数会执行那么我们就绑定一个执行函数，也就是稍后调用的函数将参数传过去就可以了，具体的实现方式有：

• 闭包形式，直接将绑定的函数写成闭包，在行内调用传参：

function clickCount(count) {
return function(event) {
console.log(count);
};
}

• 箭头函数，我们也可以直接在行内用箭头函数执行函数并传参，这种写法就是组件中传递其它参数的写法，比如element-ui绑定事件传参：

<button onClick={()=>clickCount(2)}>

跟原生事件一样react中绑定的事件也会有一个event对象表示调用的对象，因为react封装了原生事件所以event也不是浏览器自带的，不过功能用法是一样的。在react中除了onScroll所有的事件都会冒泡，日常开发中往往是不需要事件冒泡的，这时候就需要用event来阻止，写法跟原生一样。

<button onClick={(e)=>clickCount(e,2)}>
//函数中添加
e.stopPropagation();

除此之外我们可能还需要阻止默认事件e.preventDefault()。

总结

以上就是react的事件，它是合成事件，绑定方式与传参方法跟原生类似但都有所不同，有些时候我们需要阻止默认事件与事件冒泡。