React基础（叁）———事件处理

青山_袁同学

已于 2022-11-12 23:10:39 修改

阅读量267

点赞数

于 2022-11-12 23:05:52 首次发布

本文链接：https://blog.youkuaiyun.com/weixin_44951165/article/details/127814307

版权

React && React Native 专栏收录该内容

8 篇文章

订阅专栏

本文介绍了React中事件绑定的四种方式，推荐使用箭头函数进行绑定，以避免内存泄漏和确保正确的作用域。同时，文章讨论了ref引用的使用，指出避免使用`this.refs`以防止命名冲突，并在严格模式下可能导致错误。文章强调了React事件处理的事件代理模式和引用获取数据的最佳实践。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、事件绑定处理

强烈推荐第四种绑定写法

import React, { Component } from "react";

export default class App extends Component {
  render() {
    return (
      <div>
        <input></input>
        <button
          onClick={() => {
            console.log("click1");
          }}
        >
          add
        </button>

        <button onClick={this.handleClick2}>add2</button>

        <button onClick={this.handleClick3}>add3</button>

        <button
          onClick={() => {
            this.handleClick4();//推荐
          }}
        >
          add4
        </button>
      </div>
    );
  }

  handleClick2() {
    console.log("click2");
  }

  handleClick3 = () => {
    console.log("click3");
  };

  handleClick4 = () => {
    console.log("click4");
  };
}

/**
 * onMouseOver 鼠标移入触发
 * onClick 鼠标点击触发
 *
 */
 
 /**
 *  React 并不会真正的绑定事件到每一个具体的<>元素上，而是采用事件代理的模式
 */