日期:2022年10月3日

事件

React中的事件处理类似于在HTML标签中通过属性来设置事件,像是这样:

<button onclick="alert('你点我干嘛');">点我一下</button>

这是传统DOM中绑定事件的方式之一,onclick全都小写是事件的名字,它的值是一组JS代码,当事件触发时,JS代码便会执行。记住这一点,传统DOM中事件属性的JS代码在事件触发时执行!

React中的事件绑定是这样的:

const clickHandler = ()=> {
    alert('你点我干嘛');
};
const ele = <button onClick={clickHandler}>我是一个按钮</button>;

两者长得很像,但是也有很大的区别:

  1. React事件使用的是驼峰命名法
  2. 事件属性值需要的是一个函数对象,而不是调用函数

React事件名使用的是驼峰命名法而不是纯小写事件,所以在React中设置事件时onclick应该写为onClick,其他的事件也是如此。

React事件的属性值需要的是一个回调函数,函数会在触发时执行,所以上例中我写的clickHandler是没有加()的,如果加了()函数会在赋值时立刻执行,而赋值给onClick事件的将是函数的返回值undefined,这将导致事件的设置失效,这一点你可以自己试试看。

事件对象

React事件也会产生事件对象,在事件的响应函数中可以定义第一个参数来获取事件对象:

const clickHandler = (e)=> {
   // e 表示事件对象
   console.log(e);
alert('你点我干嘛');
};

这个事件对象是由React所创建的事件对象,和原生的事件对象类似,但使用它我们不需要担心兼容的问题。使用事件对象可以完成像原生DOM中事件对象的各种操作,比如取消默认行为和取消事件的冒泡:

const clickHandler = (e)=> {
   e.preventDefault(); // 取消默认行为
   e.stopPropagation(); // 取消事件的传播
   // 其他代码
};
5 1 投票
文章评分
订阅评论
提醒
guest

0 评论
内联反馈
查看所有评论
0
希望看到您的想法,请您发表评论x