likes
comments
collection
share

React中的事件处理

作者站长头像
站长
· 阅读数 64

往期回顾：

前言

事件绑定是react中一个基本概念，是学习react的必经之路。react中的事件绑定非常简单，尤其是在函数式组件内。对于函数式组件，没有太多要讲的，本文主要简单探讨下类组件中事件绑定需要注意的一些细节！

React类组件中的事件处理的写法

我们看一个demo，回忆下react中事件绑定的用法：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>hello_react</title>
  </head>
  <body>
    <!-- 准备好一个“容器” -->
    <div id="test"></div>
    <!-- 引入react核心库 -->
    <script type="text/javascript" src="./js/react.development.js"></script>
    <!-- 引入react-dom，用于支持react操作DOM -->
    <script type="text/javascript" src="./js/react-dom.development.js"></script>
    <!-- 引入babel，用于将jsx转为js -->
    <script type="text/javascript" src="./js/babel.min.js"></script>
    <!-- 引入组件标签类型声明文件 -->
    <script type="text/javascript" src="./js/prop-types.js"></script>
    <script type="text/babel">
      class Demo extends React.Component {
        addNum = (event) => {
          // 这里的this指向Demo的实例化对象
          event.target.value++;
        };
        render() {
          return (
            <div>
              <input type="text" onBlur={this.addNum} value={1} />
            </div>
          );
        }
      }
      ReactDOM.render(<Demo />, document.getElementById("test"));
    </script>
  </body>
</html>

这段代码展示了一个输入框，每当输入框失去焦点时，其内的值进行一次自增

React中的事件处理

在React中，使用箭头函数来定义事件处理器函数，它可以确保事件处理程序方法中的this关键字绑定到组件实例上：

 class Demo extends React.Component {
  addNum = (event) => {
    // 这里的this指向Demo的实例化对象
    event.target.value++;
  };
  render() {
    return (
      <div>
        <input type="text" onBlur={this.addNum} value={1} />
      </div>
    );
  }
}

在上面的例子中，我们使用箭头函数定义了addNum方法，并将其用作 onBlur事件的处理程序。

如果我们addNum不使用箭头函数的写法，那我们需要借助bind来改变this指向

 class Demo extends React.Component {
  addNum(event){
    // 这里的this指向Demo的实例化对象
    event.target.value++;
  };
  render() {
    return (
      <div>
        <input type="text" onBlur={this.addNum.bind(this)} value={1} />
      </div>
    );
  }
}

React事件处理函数的名称规则

与原生命名的区别

react的事件函数命名和原生标签的处理函数命名是不一样的，原生事件的名称是onxxxx（全小写），而react中的事件名称是onXxxx（驼峰命名）。

react事件命名规则

React事件的命名约定是使用驼峰命名法，因此React事件应该使用"onClick"而不是"onclick"。

React中，对于事件的处理，我们可以采用Js的原生方法，但它有以下弊端：

  • "onclick"是原生JavaScript事件的命名方式，虽然在React中使用"onclick"也可以触发事件，但是这是一种不规范的做法，因为这种命名方式不符合React官方的规定。
  • 如果你将事件命名为"onclick"，可能会导致其他开发人员的困惑和不适应，并且在某些情况下可能会产生意想不到的Bug。

因此，为了避免这种问题，最好还是按照React官方的规定来使用"onClick"来命名React事件。

React的事件是通过事件委托方式处理的

在上述示例中，我们的事件是虽然写在input标签上的，但实际上，所有事件都是由根节点（<div>）捕获和处理的。

当组件中的事件被触发时，React会判断该事件是否需要在该组件处理，并将事件向上冒泡，最终到达根元素。

当到达根元素时，React会检查哪些组件订阅了该事件，并调用这些组件的事件处理函数。

这种事件处理方式也被称为“合成事件”。在React中使用合成事件可以有效地减少DOM事件监听器的数量，并且可以避免一些常见的事件处理问题，例如事件冒泡和浏览器兼容性问题。

React的事件触发源

在上面这个示例中，我们通过event来访问input的value值，event是React事件处理函数中，可以访问的一个对象，它是React封装的合成事件对象，用来存储和管理事件的相关信息。该对象包含了很多实用的属性和方法，例如：

  • event.target：事件发生的目标元素
  • event.preventDefault()：阻止事件的默认行为
  • event.stopPropagation()：停止事件的传播
  • event.nativeEvent：原生的DOM事件对象

我们可以看看event的值

addNum = (event) => {
  console.log(event);
  // 这里的this指向Demo的实例化对象
  event.target.value++;
};

可以看出，event.target就是触发事件的input标签这个节点Dom元素，因此，我们可以通过event.target.value拿到其值。

React中的事件处理

转载自:https://juejin.cn/post/7270862391155703863
评论
请登录