ReactJS - 事件对象

---

---

在 React 中，当我们为按钮点击等事件构建事件处理程序时，我们会得到一个称为 React 事件对象（或合成事件）的特殊对象。此对象充当我们的代码和浏览器事件之间的桥梁。它减少了 Web 浏览器之间的差异，并提供了一些重要信息。

如何使用它？

让我们使用一个简单的示例来分解它 -

假设我们在我们的 React 应用中有一个按钮，我们希望在单击它时执行某些操作。因此，我们将定义一个 onClick 处理程序函数，如下所示 -

示例

<button onClick={e => {
   console.log(e); // The event object
}} />

在此代码中，“e”是我们的 React 事件对象，它提供有关按钮点击的信息。

发现事件对象可以做什么！

让我们浏览一下 React 事件对象实现的一些标准事件属性 -

示例 - 使用事件对象

让我们创建一个简单的应用程序来显示事件对象属性的工作原理。因此，在这个应用程序中，我们创建一个名为 EventHandlingExample.js 的组件，然后我们将在 App.js 组件中使用此组件来查看其工作原理。

EventHandlingExample.js

import React from 'react';

class EventHandlingExample extends React.Component {
   handleClick = (e) => {
      
      // Logging event properties
      console.log('Bubbles:', e.bubbles);
      console.log('Cancelable:', e.cancelable);
      console.log('Current Target:', e.currentTarget);
      console.log('Default Prevented:', e.defaultPrevented);
      console.log('Event Phase:', e.eventPhase);
      console.log('Is Trusted:', e.isTrusted);
      console.log('Target:', e.target);
      console.log('Time Stamp:', e.timeStamp);
      
      // Prevent the default behavior
      e.preventDefault();
   }   
   render() {
      return (
         <div>
            <button onClick={this.handleClick}>Click Me</button>
         </div>
      );
   }
}

export default EventHandlingExample;

App.js

import React from 'react';
import './App.css';
import EventHandlingExample from './EventHandlingExample';
function App() {
   return (
      <div className="App">
         <h1>React Event Object Example</h1>
         <EventHandlingExample />
      </div>
   );
}

export default App;

输出

在上面的示例代码中，当我们单击“单击我”按钮时，事件属性将记录在控制台中。e.preventDefault() 行显示了如何阻止按钮执行其默认操作。

标准事件方法

让我们浏览一下 React 事件对象实现的一些标准事件方法 -

示例 - 使用事件方法

让我们创建一个基本的 React 应用，该应用使用事件对象方法来阻止默认行为并在单击按钮时停止事件传播。确保项目包含 React 和 ReactDOM。创建一个名为 EventMethodsExample 的新 React 组件，该组件显示事件对象方法的使用 -

EventMethodsExample.js

import React from 'react';

class EventMethodsExample extends React.Component {
   handleClick = (e) => {
   
      // Prevent the default behavior of the button
      e.preventDefault();
      
      // Stop the event from propagating
      e.stopPropagation();
   }   
   render() {
      return (
         <div>
            <button onClick={this.handleClick}>Click Me</button>
            <p>Clicking the button will prevent the default behavior and stop event propagation.</p>
         </div>
      );
   }
}

export default EventMethodsExample;

App.js

import React from 'react';
import './App.css';
import EventMethodsExample from './EventMethodsExample';

function App() {
   return (
      <div className="App">
         <h1>React Event Object Methods Example</h1>
         <EventMethodsExample />
      </div>
   );
}

export default App;

输出

当我们运行 React 应用程序后单击“单击我”按钮时，它会阻止默认行为（如表单提交）并阻止事件进一步向上传播到 React 组件树。

此示例演示如何使用事件对象的 preventDefault() 和 stopPropagation() 方法来管理事件行为。

示例 - 使用事件对象和方法

让我们再创建一个示例应用程序来演示 React 事件对象的使用。在此示例中，我们将创建一个简单的 React 应用程序，该应用程序响应按键事件。

KeyPressExample.js

import React from 'react';

class KeyPressExample extends React.Component {
   handleKeyPress = (e) => {
      
      // Log the key that was pressed
      console.log('Pressed Key:', e.key);
   }   
   render() {
      return (
         <div>
            <h2>React Key Press Event Example</h2>
            <input type="text" placeholder="Press a key" onKeyPress={this.handleKeyPress} />
         </div>
      );
   }
}

export default KeyPressExample;

App.js

import React from 'react';
import './App.css';
import EventHandlingExample from './EventHandlingExample';
import EventMethodsExample from './EventMethodsExample';
import KeyPressExample from './KeyPressExample'; // Import the new component
function App() {
   return (
      <div>
         <h1>React Event Examples</h1>
         <EventHandlingExample />
         <EventMethodsExample />
         <KeyPressExample /> {/* Include the new component */}
      </div>
   );
}

export default App;

输出

结论

简单来说，React 事件对象帮助我们以可靠且有效的方式处理用户交互，确保我们的应用程序在多个 Web 浏览器和设置中都能正常运行。