事件处理 (精读React官方文档—06)

简介: 事件处理 (精读React官方文档—06)

这是我参与更文挑战的第19天,活动详情查看:更文挑战

React中的事件处理

  • React中的事件的命名采用小驼峰的命名方式,小驼峰的实例onClcik
  • 传统的HTML事件处理函数传入的是一个字符串
<button onclick="activateLasers()">
  Activate Lasers
</button>
复制代码
  • React中事件处理通过大括号进行包裹
<button onClick={activateLasers}>
  Activate Lasers
</button>
复制代码
  • 在React中要想阻止默认行为必须要通过preventDefault,不能通过返回false的方式。

传统的 HTML 中阻止表单的默认提交行为。

<form onsubmit="console.log('You clicked submit.'); return false">
  <button type="submit">Submit</button>
</form>
复制代码

React中阻止表单的默认提交行为

function Form() {
  function handleSubmit(e) {
    e.preventDefault();
    console.log('You clicked submit.');
  }
  return (
    <form onSubmit={handleSubmit}>
      <button type="submit">Submit</button>
    </form>
  );
}
复制代码
  • React监听DOM元素,一般不是通过addEventListener。而是通过组件中的方法。
  • 谨慎的对待JSX语法中回调函数的this,class的方法默认不会绑定this,为了解决这类问题,我们一般在回调函数中使用箭头函数。
class LoggingButton extends React.Component {
  handleClick() {
    console.log('this is:', this);
  }
  render() {
    // 此语法确保 `handleClick` 内的 `this` 已被绑定。
    return (
      <button onClick={() => this.handleClick()}>
        Click me
      </button>
    );
  }
}
复制代码

向事件处理程序传递参数

官方描述:在循环中,通常我们会为事件处理函数传递额外的参数。例如,若 id 是你要删除那一行的 ID,以下两种方式都可以向事件处理函数传递参数。

<button onClick={(e) => this.deleteRow(id, e)}>Delete Row</button>
<button onClick={this.deleteRow.bind(this, id)}>Delete Row</button>
复制代码
  • 上面的两种方式是等价的,一种是通过箭头函数,一种是通过bind来绑定JSX回调函数中的this,然后传入参数。

官方描述:在这两种情况下,React 的事件对象 e 会被作为第二个参数传递。如果通过箭头函数的方式,事件对象必须显式的进行传递,而通过 bind 的方式,事件对象以及更多的参数将会被隐式的进行传递。

解读

  • 通过箭头函数的方式,事件对象需要显示传递,而通过bind则可以进行隐式传递。

欢迎大家关注我的专栏,一起学习React官方文档,每日更新哦!


相关文章
|
2月前
|
前端开发 JavaScript API
【第54期】一文读懂React文档
【第54期】一文读懂React文档
62 1
|
2月前
|
前端开发 开发者 UED
【第33期】一文学会用React事件
【第33期】一文学会用React事件
33 0
|
19天前
|
前端开发 JavaScript 算法
react【框架原理详解】JSX 的本质、SyntheticEvent 合成事件机制、组件渲染过程、组件更新过程
react【框架原理详解】JSX 的本质、SyntheticEvent 合成事件机制、组件渲染过程、组件更新过程
21 0
|
2月前
|
前端开发 调度 开发者
React的事件处理机制
【5月更文挑战第29天】React的事件处理机制
29 2
|
2月前
|
前端开发 JavaScript
在React中,如何通过事件处理函数来管理按钮的点击行为?
【5月更文挑战第28天】在React中,如何通过事件处理函数来管理按钮的点击行为?
34 1
|
2月前
|
前端开发 JavaScript
在React中,如何通过事件处理函数来管理输入框的获取和失去焦点行为?
【5月更文挑战第28天】在React中,如何通过事件处理函数来管理输入框的获取和失去焦点行为?
39 1
|
2月前
|
存储 前端开发 JavaScript
【亮剑】在React中,处理`onScroll`事件可实现复杂功能如无限滚动和视差效果
【4月更文挑战第30天】在React中,处理`onScroll`事件可实现复杂功能如无限滚动和视差效果。类组件和函数组件都能使用`onScroll`,通过`componentDidMount`和`componentWillUnmount`或`useEffect`添加和移除事件监听器。性能优化需注意节流、防抖、虚拟滚动、避免同步计算和及时移除监听器。实战案例展示了如何用Intersection Observer和`onScroll`实现无限滚动列表,当最后一项进入视口时加载更多内容。合理利用滚动事件能提升用户体验,同时要注意性能优化。
|
2月前
|
JavaScript 前端开发 开发者
深入比较Input、Change和Blur事件:Vue与React中的行为差异解析
深入比较Input、Change和Blur事件:Vue与React中的行为差异解析
|
2月前
|
前端开发 JavaScript 定位技术
Docusaurus框架——react+antd+echarts自定义mdx生成图表代码解释文档
Docusaurus框架——react+antd+echarts自定义mdx生成图表代码解释文档
60 0