MK
摩柯社区 - 一个极简的技术知识社区
AI 面试

React 常见事件处理的坑与解决办法

2023-05-044.5k 阅读

事件绑定语法的常见问题

在 React 中，绑定事件的语法是开发过程中基础且关键的部分。然而，一些开发者在初次接触时容易陷入一些误区。

传统 HTML 事件绑定与 React 事件绑定的差异

在传统 HTML 中，我们绑定事件可能像这样：

<button onclick="handleClick()">点击我</button>
<script>
  function handleClick() {
    console.log('按钮被点击了');
  }
</script>

而在 React 中，事件绑定采用驼峰命名法，并且值是一个函数引用，例如：

import React, { Component } from 'react';

class ButtonComponent extends Component {
  handleClick() {
    console.log('按钮被点击了');
  }
  render() {
    return <button onClick={this.handleClick}>点击我</button>;
  }
}

这里就容易出现一个坑，在 React 的 handleClick 方法中，如果直接使用 this，会发现 this 指向的并非组件实例。这是因为在 JavaScript 中，函数的 this 指向取决于函数的调用方式。在 React 中，当 onClick 触发时，handleClick 函数是以普通函数的方式调用，而不是作为组件实例的方法调用，所以 this 指向 window（在严格模式下为 undefined）。

解决 this 指向问题

  1. 使用箭头函数 箭头函数没有自己的 this，它的 this 继承自外层作用域。所以我们可以在 render 方法中使用箭头函数来绑定事件，像这样：
import React, { Component } from 'react';

class ButtonComponent extends Component {
  handleClick() {
    console.log('按钮被点击了', this);
  }
  render() {
    return <button onClick={() => this.handleClick()}>点击我</button>;
  }
}

在这个例子中，箭头函数 () => this.handleClick() 中的 this 指向组件实例，因为它继承了 render 方法的 this，而 render 方法的 this 是指向组件实例的。

  1. 在构造函数中绑定 另一种常见的解决方法是在组件的构造函数中使用 bind 方法绑定 this：
import React, { Component } from 'react';

class ButtonComponent extends Component {
  constructor(props) {
    super(props);
    this.handleClick = this.handleClick.bind(this);
  }
  handleClick() {
    console.log('按钮被点击了', this);
  }
  render() {
    return <button onClick={this.handleClick}>点击我</button>;
  }
}

在构造函数中，通过 this.handleClick.bind(this) 将 handleClick 函数的 this 绑定到组件实例，这样在 render 方法中直接使用 this.handleClick 就可以保证 this 指向正确。

  1. 使用属性初始化器语法（ES6 类字段提案） 从 ES6 类字段提案开始，我们还可以使用属性初始化器语法来绑定 this：
import React, { Component } from 'react';

class ButtonComponent extends Component {
  handleClick = () => {
    console.log('按钮被点击了', this);
  }
  render() {
    return <button onClick={this.handleClick}>点击我</button>;
  }
}

这种方式定义的 handleClick 是一个箭头函数，在定义时就绑定了组件实例的 this，简洁且高效。

事件参数传递问题

在 React 事件处理中，传递参数也是一个容易出错的点。

传递自定义参数

有时候我们需要在事件处理函数中传递自定义参数。例如，我们有一个列表，每个列表项点击时需要知道该项的索引：

import React, { Component } from 'react';

class ListComponent extends Component {
  handleClick(index) {
    console.log('点击了第', index, '项');
  }
  render() {
    const items = ['苹果', '香蕉', '橙子'];
    return (
      <ul>
        {items.map((item, index) => (
          <li key={index} onClick={() => this.handleClick(index)}>{item}</li>
        ))}
      </ul>
    );
  }
}

这里使用箭头函数 () => this.handleClick(index) 来传递 index 参数。但如果不使用箭头函数，直接写成 <li key={index} onClick={this.handleClick(index)}>{item}</li> 会有问题。因为这样会在渲染时就调用 this.handleClick(index)，而不是在点击时调用，并且 this.handleClick(index) 的返回值不一定是一个函数，所以 onClick 会接收到错误的值。

同时获取 React 事件对象和自定义参数

有时候我们既需要获取 React 提供的事件对象（如 event），又需要传递自定义参数。一种常见的错误做法是：

import React, { Component } from 'react';

class ButtonComponent extends Component {
  handleClick(index, event) {
    console.log('点击了按钮，索引是', index);
    console.log('事件对象', event);
  }
  render() {
    return <button onClick={this.handleClick(1)}>点击我</button>;
  }
}

这样写会在渲染时就调用 handleClick 函数，并且由于不是在点击时调用，event 参数也不会正确传递。正确的做法是使用箭头函数：

import React, { Component } from 'react';

class ButtonComponent extends Component {
  handleClick(index, event) {
    console.log('点击了按钮，索引是', index);
    console.log('事件对象', event);
  }
  render() {
    return <button onClick={(event) => this.handleClick(1, event)}>点击我</button>;
  }
}

在这个例子中，箭头函数 (event) => this.handleClick(1, event) 确保了在点击时调用 handleClick 函数，并且正确传递了 event 参数和自定义的 index 参数。

事件冒泡与阻止冒泡

事件冒泡是 JavaScript 事件机制中的一个重要概念，在 React 中也同样存在。

事件冒泡原理

当一个元素上的事件被触发时，该事件会从最内层的元素开始，依次向上传播到外层元素，这就是事件冒泡。例如：

import React, { Component } from 'react';

class OuterComponent extends Component {
  handleOuterClick() {
    console.log('外层组件被点击');
  }
  render() {
    return (
      <div onClick={this.handleOuterClick}>
        <InnerComponent />
      </div>
    );
  }
}

class InnerComponent extends Component {
  handleInnerClick() {
    console.log('内层组件被点击');
  }
  render() {
    return <button onClick={this.handleInnerClick}>点击我</button>;
  }
}

当点击按钮时，首先会执行 InnerComponent 的 handleInnerClick 方法，然后由于事件冒泡，会继续执行 OuterComponent 的 handleOuterClick 方法。在控制台中会先输出“内层组件被点击”，然后输出“外层组件被点击”。

阻止事件冒泡

在某些情况下，我们可能不希望事件冒泡。例如，在一个下拉菜单中，点击菜单选项时不希望触发菜单容器的点击事件。在 React 中，可以通过 event.stopPropagation() 方法来阻止事件冒泡。

import React, { Component } from 'react';

class OuterComponent extends Component {
  handleOuterClick() {
    console.log('外层组件被点击');
  }
  render() {
    return (
      <div onClick={this.handleOuterClick}>
        <InnerComponent />
      </div>
    );
  }
}

class InnerComponent extends Component {
  handleInnerClick(event) {
    event.stopPropagation();
    console.log('内层组件被点击');
  }
  render() {
    return <button onClick={this.handleInnerClick}>点击我</button>;
  }
}

在 InnerComponent 的 handleInnerClick 方法中，调用 event.stopPropagation() 后，当点击按钮时，只会执行 InnerComponent 的 handleInnerClick 方法，不会触发 OuterComponent 的 handleOuterClick 方法，控制台只会输出“内层组件被点击”。

事件默认行为与阻止默认行为

除了事件冒泡，事件的默认行为也是需要关注的点。

事件默认行为示例

许多 HTML 元素都有默认行为，例如 <a> 标签的默认行为是在点击时导航到指定的 href 链接，<form> 标签的默认行为是在提交时刷新页面。在 React 中，这些默认行为同样存在。

import React, { Component } from 'react';

class LinkComponent extends Component {
  render() {
    return <a href="https://example.com">点击跳转</a>;
  }
}

当点击这个链接时，页面会跳转到 https://example.com，这就是 <a> 标签的默认行为。

阻止事件默认行为

有时候我们需要阻止这些默认行为。例如，在表单提交时，我们可能希望通过 AJAX 方式提交数据而不是刷新页面。在 React 中，可以通过 event.preventDefault() 方法来阻止事件默认行为。

import React, { Component } from 'react';

class FormComponent extends Component {
  handleSubmit(event) {
    event.preventDefault();
    console.log('表单提交，阻止了默认刷新页面行为');
    // 这里可以添加 AJAX 提交表单数据的逻辑
  }
  render() {
    return (
      <form onSubmit={this.handleSubmit}>
        <input type="text" placeholder="输入内容" />
        <button type="submit">提交</button>
      </form>
    );
  }
}

在 FormComponent 的 handleSubmit 方法中，调用 event.preventDefault() 后，当点击提交按钮时，表单不会刷新页面，而是执行我们自定义的逻辑，控制台会输出“表单提交，阻止了默认刷新页面行为”。

合成事件相关问题

React 为了跨浏览器兼容性和性能优化，引入了合成事件（SyntheticEvent）。

合成事件的特性

合成事件是 React 对原生浏览器事件的封装，它具有与原生事件相似的接口，但在不同浏览器中表现一致。例如，event.target 在合成事件中同样表示触发事件的目标元素。

import React, { Component } from 'react';

class ClickComponent extends Component {
  handleClick(event) {
    console.log('触发事件的目标元素是', event.target);
  }
  render() {
    return <button onClick={this.handleClick}>点击我</button>;
  }
}

这里的 event 就是合成事件对象，通过 event.target 可以获取到按钮元素。

合成事件的生命周期

合成事件有自己的生命周期。在事件处理函数执行完毕后，合成事件对象会被重用和池化，以提高性能。这就意味着在事件处理函数外部访问合成事件对象的属性可能会得到 null 或 undefined。

import React, { Component } from 'react';

class ButtonComponent extends Component {
  handleClick(event) {
    const target = event.target;
    setTimeout(() => {
      console.log('延迟访问事件目标元素', target);
    }, 1000);
  }
  render() {
    return <button onClick={this.handleClick}>点击我</button>;
  }
}

在这个例子中，setTimeout 延迟 1 秒后访问 target，此时 target 可能已经被合成事件对象的重用和池化机制处理，所以可能输出 null 或 undefined。如果需要在事件处理函数外部访问事件相关数据，应该在事件处理函数内部提前保存需要的数据。

受控组件与非受控组件的事件处理差异

在 React 中，表单元素分为受控组件和非受控组件，它们的事件处理方式有所不同。

受控组件的事件处理

受控组件是指其值由 React 组件的状态控制的表单元素。例如，<input> 标签的 value 属性由组件的状态提供，并且通过 onChange 事件更新状态。

import React, { Component } from 'react';

class InputComponent extends Component {
  constructor(props) {
    super(props);
    this.state = {
      inputValue: ''
    };
    this.handleChange = this.handleChange.bind(this);
  }
  handleChange(event) {
    this.setState({
      inputValue: event.target.value
    });
  }
  render() {
    return <input type="text" value={this.state.inputValue} onChange={this.handleChange} />;
  }
}

在这个例子中，inputValue 是组件的状态，onChange 事件处理函数 handleChange 会根据输入框的值更新状态，从而实现输入框的值始终与状态保持同步。

非受控组件的事件处理

非受控组件则相反，其值不受 React 组件状态直接控制，而是由 DOM 本身控制。对于非受控组件，通常使用 ref 来获取其值。

import React, { Component } from 'react';

class UncontrolledInputComponent extends Component {
  handleSubmit = (event) => {
    event.preventDefault();
    const inputValue = this.inputRef.current.value;
    console.log('输入的值是', inputValue);
  }
  render() {
    return (
      <form onSubmit={this.handleSubmit}>
        <input type="text" ref={(input) => this.inputRef = input} />
        <button type="submit">提交</button>
      </form>
    );
  }
}

在这个例子中，通过 ref 获取输入框的值，onSubmit 事件处理函数在表单提交时获取输入框的值并进行处理。与受控组件不同，非受控组件的值更新不依赖于 React 状态的变化，而是直接从 DOM 中获取。

性能相关的事件处理问题

在 React 应用中，性能是一个重要的考量因素，事件处理也可能影响性能。

频繁触发事件导致的性能问题

如果一个事件处理函数中执行了复杂的计算或频繁更新状态，可能会导致性能问题。例如，在 scroll 事件处理函数中频繁更新状态：

import React, { Component } from 'react';

class ScrollComponent extends Component {
  constructor(props) {
    super(props);
    this.state = {
      scrollPosition: 0
    };
    this.handleScroll = this.handleScroll.bind(this);
  }
  handleScroll() {
    const scrollPosition = window.pageYOffset;
    this.setState({
      scrollPosition
    });
  }
  componentDidMount() {
    window.addEventListener('scroll', this.handleScroll);
  }
  componentWillUnmount() {
    window.removeEventListener('scroll', this.handleScroll);
  }
  render() {
    return (
      <div>
        <p>滚动位置: {this.state.scrollPosition}</p>
      </div>
    );
  }
}

在这个例子中，scroll 事件会在用户滚动页面时频繁触发，每次触发都会调用 setState 更新状态，这可能会导致性能下降。因为每次 setState 都会触发组件重新渲染。

优化性能的方法

  1. 节流（Throttle） 节流是指在一定时间内，只允许事件处理函数执行一次。可以使用 lodash 库中的 throttle 方法来实现。
import React, { Component } from'react';
import throttle from 'lodash/throttle';

class ScrollComponent extends Component {
  constructor(props) {
    super(props);
    this.state = {
      scrollPosition: 0
    };
    this.handleScroll = this.handleScroll.bind(this);
    this.throttledHandleScroll = throttle(this.handleScroll, 200);
  }
  handleScroll() {
    const scrollPosition = window.pageYOffset;
    this.setState({
      scrollPosition
    });
  }
  componentDidMount() {
    window.addEventListener('scroll', this.throttledHandleScroll);
  }
  componentWillUnmount() {
    window.removeEventListener('scroll', this.throttledHandleScroll);
    this.throttledHandleScroll.cancel();
  }
  render() {
    return (
      <div>
        <p>滚动位置: {this.state.scrollPosition}</p>
      </div>
    );
  }
}

在这个例子中，throttle(this.handleScroll, 200) 表示每 200 毫秒最多执行一次 handleScroll 函数，这样可以减少不必要的状态更新和组件重新渲染。

  1. 防抖（Debounce） 防抖是指在事件触发后，等待一定时间，如果在这段时间内事件再次触发，则重新计时，直到一定时间内没有再次触发事件，才执行事件处理函数。同样可以使用 lodash 库中的 debounce 方法。
import React, { Component } from'react';
import debounce from 'lodash/debounce';

class SearchComponent extends Component {
  constructor(props) {
    super(props);
    this.state = {
      searchValue: ''
    };
    this.handleChange = this.handleChange.bind(this);
    this.debouncedHandleChange = debounce(this.handleSearch, 300);
  }
  handleChange(event) {
    this.setState({
      searchValue: event.target.value
    });
    this.debouncedHandleChange(event.target.value);
  }
  handleSearch(value) {
    console.log('执行搜索操作，搜索值为', value);
    // 这里可以添加实际的搜索逻辑
  }
  componentWillUnmount() {
    this.debouncedHandleChange.cancel();
  }
  render() {
    return (
      <div>
        <input type="text" value={this.state.searchValue} onChange={this.handleChange} placeholder="搜索" />
      </div>
    );
  }
}

在这个例子中，用户在输入框中输入内容时，handleChange 方法会被触发，但 debouncedHandleChange 会在用户停止输入 300 毫秒后才执行 handleSearch 函数，避免了频繁触发搜索操作，提高了性能。

跨组件事件处理

在大型 React 应用中，经常会遇到需要跨组件处理事件的情况。

事件提升（Lifting State Up）

事件提升是一种常见的跨组件处理事件的方法，即将相关状态提升到共同的父组件，通过父组件传递回调函数给子组件来处理事件。

import React, { Component } from'react';

class ParentComponent extends Component {
  constructor(props) {
    super(props);
    this.state = {
      count: 0
    };
    this.handleIncrement = this.handleIncrement.bind(this);
  }
  handleIncrement() {
    this.setState((prevState) => ({
      count: prevState.count + 1
    }));
  }
  render() {
    return (
      <div>
        <p>计数: {this.state.count}</p>
        <ChildComponent onIncrement={this.handleIncrement} />
      </div>
    );
  }
}

class ChildComponent extends Component {
  render() {
    return <button onClick={this.props.onIncrement}>增加计数</button>;
  }
}

在这个例子中，ParentComponent 管理 count 状态，并将 handleIncrement 回调函数传递给 ChildComponent。ChildComponent 点击按钮时调用 this.props.onIncrement，从而触发 ParentComponent 中的状态更新。

使用 Context

当组件嵌套层次较深，事件提升变得繁琐时，可以考虑使用 React 的 Context。但需要注意，Context 主要用于共享那些对于一个组件树而言是“全局”的数据，不建议滥用。

import React, { Component, createContext } from'react';

const CountContext = createContext();

class GrandparentComponent extends Component {
  constructor(props) {
    super(props);
    this.state = {
      count: 0
    };
    this.handleIncrement = this.handleIncrement.bind(this);
  }
  handleIncrement() {
    this.setState((prevState) => ({
      count: prevState.count + 1
    }));
  }
  render() {
    return (
      <CountContext.Provider value={{ count: this.state.count, handleIncrement: this.handleIncrement }}>
        <ParentComponent />
      </CountContext.Provider>
    );
  }
}

class ParentComponent extends Component {
  render() {
    return <ChildComponent />;
  }
}

class ChildComponent extends Component {
  render() {
    const { count, handleIncrement } = this.context;
    return (
      <div>
        <p>计数: {count}</p>
        <button onClick={handleIncrement}>增加计数</button>
      </div>
    );
  }
}

ChildComponent.contextType = CountContext;

在这个例子中，GrandparentComponent 通过 CountContext.Provider 提供 count 状态和 handleIncrement 函数，ChildComponent 通过 contextType 获取这些数据，从而实现跨组件的事件处理。不过，从 React 16.3 版本开始，官方推荐使用 useContext Hook 来替代 contextType，使用方法如下：

import React, { Component, createContext, useContext } from'react';

const CountContext = createContext();

class GrandparentComponent extends Component {
  constructor(props) {
    super(props);
    this.state = {
      count: 0
    };
    this.handleIncrement = this.handleIncrement.bind(this);
  }
  handleIncrement() {
    this.setState((prevState) => ({
      count: prevState.count + 1
    }));
  }
  render() {
    return (
      <CountContext.Provider value={{ count: this.state.count, handleIncrement: this.handleIncrement }}>
        <ParentComponent />
      </CountContext.Provider>
    );
  }
}

class ParentComponent extends Component {
  render() {
    return <ChildComponent />;
  }
}

function ChildComponent() {
  const { count, handleIncrement } = useContext(CountContext);
  return (
    <div>
      <p>计数: {count}</p>
      <button onClick={handleIncrement}>增加计数</button>
    </div>
  );
}

这种方式更加简洁和直观，并且可以在函数组件中使用。

与第三方库集成时的事件处理冲突

在 React 项目中，经常会集成第三方库，这时可能会出现事件处理冲突的情况。

与 jQuery 插件的冲突

例如，在 React 项目中集成一个基于 jQuery 的轮播插件。假设插件通过监听 click 事件来切换图片，而 React 组件本身也可能有 click 事件处理逻辑。

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script src="carousel-plugin.js"></script>
</head>

<body>
  <div id="root"></div>
  <script src="react.js"></script>
  <script src="react-dom.js"></script>
  <script src="index.js"></script>
</body>

</html>

import React, { Component } from'react';

class CarouselComponent extends Component {
  componentDidMount() {
    $('#carousel').carouselPlugin();
  }
  handleClick() {
    console.log('React 组件的点击事件');
  }
  render() {
    return (
      <div id="carousel">
        <img src="image1.jpg" />
        <img src="image2.jpg" />
        <button onClick={this.handleClick}>点击</button>
      </div>
    );
  }
}

在这个例子中，carouselPlugin 插件可能也在监听 #carousel 内元素的 click 事件，这就可能与 React 组件的 click 事件处理函数冲突。解决方法之一是尽量避免在同一元素上绑定相同类型的事件，可以通过修改插件的配置，让插件监听不同的自定义事件，然后在 React 组件中触发该自定义事件。

import React, { Component } from'react';

class CarouselComponent extends Component {
  componentDidMount() {
    $('#carousel').carouselPlugin({
      customEvent: 'carousel:next'
    });
  }
  handleClick() {
    $('#carousel').trigger('carousel:next');
    console.log('React 组件的点击事件');
  }
  render() {
    return (
      <div id="carousel">
        <img src="image1.jpg" />
        <img src="image2.jpg" />
        <button onClick={this.handleClick}>点击</button>
      </div>
    );
  }
}

这样，通过自定义事件避免了与 React 原生 click 事件的冲突。

与其他 React 库的冲突

有时集成多个 React 库也可能导致事件处理冲突。例如，同时使用 React Router 和一个自定义的导航菜单库，它们可能都对点击链接的事件有自己的处理逻辑。解决这种冲突的关键是深入了解各个库的事件处理机制，通过合理的配置或调整代码逻辑来避免冲突。比如，可以在自定义导航菜单库中，通过传递特定的参数来告诉它不要处理某些链接的点击事件，而是交给 React Router 处理。

import React, { Component } from'react';
import { BrowserRouter as Router, Routes, Route, Link } from'react-router-dom';
import CustomMenu from 'custom-menu-library';

class App extends Component {
  render() {
    return (
      <Router>
        <CustomMenu ignoreReactRouterLinks={true}>
          <ul>
            <li><Link to="/home">首页</Link></li>
            <li><Link to="/about">关于</Link></li>
          </ul>
        </CustomMenu>
        <Routes>
          <Route path="/home" element={<div>首页内容</div>} />
          <Route path="/about" element={<div>关于内容</div>} />
        </Routes>
      </Router>
    );
  }
}

在这个例子中，CustomMenu 库通过 ignoreReactRouterLinks 参数来避免处理 React Router 的链接点击事件，从而解决了可能的冲突。

通过对以上 React 常见事件处理坑点的分析与解决办法的探讨，希望开发者在实际项目中能够更加熟练和准确地处理各种事件相关问题，提升 React 应用的质量和用户体验。在实际开发中，还需要根据具体的业务需求和项目场景，灵活运用这些方法来优化事件处理逻辑。