web前端高级React - React从入门到进阶之React事件处理

系列文章目录

第一章：React从入门到进阶之初识React
第一章：React从入门到进阶之JSX简介
第三章：React从入门到进阶之元素渲染
第四章：React从入门到进阶之JSX虚拟DOM渲染为真实DOM的原理和步骤
第五章：React从入门到进阶之组件化开发及Props属性传值
第六章：React从入门到进阶之state及组件的生命周期
第七章：React从入门到进阶之React事件处理
第八章：React从入门到进阶之React条件渲染

一、事件处理

React 元素的事件处理和DOM元素的很相似，但也有一点语法上的不同：

• React事件的命名采用的是小驼峰（camelCase），而不是纯小写
• 使用JSX语法时需要传入一个函数作为事件处理函数，而不是一个字符串

• 传统的HTML：

<button onclick="activateLasers()">click</button>
<!--事件名为小写，事件绑定的值是一个函数字符串-->

• React元素

<!--事件名为小驼峰式，事件绑定的值就是一个函数，而不是字符串形式-->
<button onClick={activateLasers}>click</button>

在Reac中还有另外一个不同的地方就是：我们不能通过返回false的方式来阻止事件的默认行为。必须得通过显示调用preventDefault来阻止。

• 传统HTML

<!--直接return false-->
<a href="#" onclick="console.log('The link was clicked.'); return false">
  Click me
</a>

• React组件

function ActionLink() {
   
  function handleClick(e) {
   
    e.