实习生级别：在 React 中处理事件-js教程-PHP中文网

实习生级别：在 React 中处理事件

WBOY

发布： 2024-07-17 01:40:50

原创

857 人浏览过

Intern level: Handling Events in React

在 React 中处理事件是创建交互式 Web 应用程序的一个重要方面。本指南将向您介绍 React 中事件处理的基础知识，包括添加事件处理程序、了解合成事件、向事件处理程序传递参数、创建自定义事件和事件委托。

事件处理

在 JSX 中添加事件处理程序

在 React 中，您可以直接在 JSX 中添加事件处理程序。事件处理程序是在发生特定事件（例如单击按钮或表单提交）时调用的函数。 React 的事件处理类似于处理常规 HTML 中的事件，但有一些差异。

添加事件处理程序的示例：

import React from 'react';

const handleClick = () => {
  alert('Button clicked!');
};

const App = () => {
  return (
    <div>
      <button onClick={handleClick}>Click Me</button>
    </div>
  );
};

export default App;

登录后复制

在此示例中，每当单击按钮时都会调用handleClick 函数。 JSX 中的 onClick 属性用于指定事件处理程序。

综合事件

React 使用称为合成事件的系统来处理事件。合成事件是浏览器本机事件系统的跨浏览器包装器。这可确保事件在不同浏览器中表现一致。

合成事件示例：

import React from 'react';

const handleInputChange = (event) => {
  console.log('Input value:', event.target.value);
};

const App = () => {
  return (
    <div>
      <input type="text" onChange={handleInputChange} />
    </div>
  );
};

export default App;

登录后复制

在此示例中，handleInputChange 函数会在输入字段的值发生更改时记录它。事件参数是一个合成事件，它在所有浏览器中提供一致的事件属性。

将参数传递给事件处理程序

有时，您需要将额外的参数传递给事件处理程序。这可以使用箭头函数或绑定方法来完成。

使用箭头函数的示例：

import React from 'react';

const handleClick = (message) => {
  alert(message);
};

const App = () => {
  return (
    <div>
      <button onClick={() => handleClick('Button clicked!')}>Click Me</button>
    </div>
  );
};

export default App;

登录后复制

使用绑定方法的示例：

import React from 'react';

const handleClick = (message) => {
  alert(message);
};

const App = () => {
  return (
    <div>
      <button onClick={handleClick.bind(null, 'Button clicked!')}>Click Me</button>
    </div>
  );
};

export default App;

登录后复制

这两种方法都允许您向handleClick 函数传递附加参数。

自定义事件处理

创建自定义事件

虽然 React 的合成事件涵盖了大多数典型用例，但您可能需要为更复杂的交互创建自定义事件。可以使用 CustomEvent 构造函数和dispatchEvent 方法创建和调度自定义事件。

创建和调度自定义事件的示例：

import React, { useEffect, useRef } from 'react';

const CustomEventComponent = () => {
  const buttonRef = useRef(null);

  useEffect(() => {
    const handleCustomEvent = (event) => {
      alert(event.detail.message);
    };

    const button = buttonRef.current;
    button.addEventListener('customEvent', handleCustomEvent);

    return () => {
      button.removeEventListener('customEvent', handleCustomEvent);
    };
  }, []);

  const handleClick = () => {
    const customEvent = new CustomEvent('customEvent', {
      detail: { message: 'Custom event triggered!' },
    });
    buttonRef.current.dispatchEvent(customEvent);
  };

  return (
    <button ref={buttonRef} onClick={handleClick}>
      Trigger Custom Event
    </button>
  );
};

export default CustomEventComponent;

登录后复制

在此示例中，单击按钮时将创建并调度名为 customEvent 的自定义事件。事件处理程序侦听自定义事件并显示带有事件详细消息的警报。

React 中的事件委托

事件委托是一种使用单个事件侦听器来管理多个元素的事件的技术。这对于有效管理事件非常有用，尤其是在列表或表格中。

事件委托示例：

import React from 'react';

const handleClick = (event) => {
  if (event.target.tagName === 'BUTTON') {
    alert(`Button ${event.target.textContent} clicked!`);
  }
};

const App = () => {
  return (
    <div onClick={handleClick}>
      <button>1</button>
      <button>2</button>
      <button>3</button>
    </div>
  );
};

export default App;

登录后复制

在此示例中，div 元素上的单个事件处理程序管理所有按钮的单击事件。事件处理程序检查 event.target 以确定单击了哪个按钮并相应地显示警报。