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事件对象实现的一些标准Event方法 -

示例 - 使用事件方法

让我们创建一个基本的 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 浏览器和设置上正常运行。