零基础教你使用React事件处理方法

事件绑定

  • React事件绑定语法与DOM事件语法相似
  • 语法: on+事件名称={事件处理程序},例如: onClick={() =>{}}
  • 注意点:React事件采用驼峰命名法,例如onClick,onFocus… 否则事件不生效

类创建组件事件绑定
零基础教你使用React事件处理方法_第1张图片
函数创建组件事件绑定两种方式
零基础教你使用React事件处理方法_第2张图片
零基础教你使用React事件处理方法_第3张图片

一定要注意:函数和类创建组件事件绑定方式略有不同

事件对象

  • 可以通过事件处理程序的参数获取到事件对象
  • React中的事件对象叫做︰合成事件(对象)
  • 合成事件:兼容所有浏览器,无需担心浏览器兼容性
    零基础教你使用React事件处理方法_第4张图片
    平常放一个a标签点击会跳转到我们写入的地址,我们在上面+一个点击事件对它阻止默认行为

你可能感兴趣的:(react,react)