ReactJS - 创建事件感知组件

事件管理是 Web 应用程序中的重要功能之一。它使用户能够与应用程序交互。React 支持 Web 应用程序中可用的所有事件。React 事件处理与 DOM 事件非常相似，但变化不大。例如，单击组件是基于 React 的网站中可以观察到的常见事件之一。

React 中的事件感知组件只不过是一个包含事件处理程序方法的组件。该组件可以是类组件，也可以是功能组件。在本章中，我们将学习如何使用 React 创建此类事件感知组件。

如何创建事件感知组件?

以下是创建新事件感知组件的步骤 −

让我们创建一个新组件 MessageWithEvent 并在组件中处理事件，以更好地理解 React 应用程序中的事件管理。

步骤 1 −在您最喜欢的编辑器中打开 expense-manager 应用程序。

接下来，在 src/components 文件夹中创建一个文件 MessageWithEvent.js，以创建 MessageWithEvent 组件。

导入 React 库。

import React from 'react';

步骤 2 − 创建一个类 MessageWithEvent 并使用 props 调用构造函数。

class MessageWithEvent extends React.Component {   
   constructor(props) { 
      super(props); 
   } 
}

步骤 3 − 创建一个事件处理程序方法 logEventToConsole，它将把事件详细信息记录到控制台。

logEventToConsole(e) {
    console.log(e.target.innerHTML);
}

步骤 4 − 创建一个 render 函数。

render() {
}

在 render() 函数中，创建一条问候消息并返回它。

render() {
   return (
      <div>
         <p>Hello {this.props.name}!</p>
      </div>
   );
}

步骤 5 − 然后，将 logEventToConsole 方法设置为根容器(div)的点击事件的事件处理程序。

render() {
   return (
      <div onClick={this.logEventToConsole}>
         <p>Hello {this.props.name}!</p>
      </div>
   );
}

步骤 6 − 通过绑定事件处理程序来更新构造函数。

class MessageWithEvent extends React.Component { 
   constructor(props) { 
      super(props); 
      this.logEventToConsole = this.logEventToConsole.bind(); 
   } 
}

最后，导出组件。

export default MessageWithEvent;

MessageWithEvent 组件的完整代码如下 −

import React from 'react';

class MessageWithEvent extends React.Component {
   constructor(props) {
      super(props);

      this.logEventToConsole = this.logEventToConsole.bind();
   }
   logEventToConsole(e) {
      console.log(e.target.innerHTML);
   }
   render() {
      return (
         <div onClick={this.logEventToConsole}>
            <p>Hello {this.props.name}!</p>
         </div>
      );
   }
}
export default MessageWithEvent;

index.js

接下来，打开 index.js 并导入 MessageWithEvent。

import MessageWithEvent from './components/MessageWithEvent'

使用 MessageWithEvent 组件 构建应用程序的用户界面。

import React from 'react';
import ReactDOM from 'react-dom';
import MessageWithEvent from './components/MessageWithEvent'

ReactDOM.render(
   <React.StrictMode>
       <div>
            <MessageWithEvent name="React" />
            <MessageWithEvent name="React developer" />
      </div>
   </React.StrictMode>,
   document.getElementById('root')
);

使用 npm 命令为应用程序提供服务。

npm start

打开浏览器并在地址栏中输入 http://localhost:3000 并按 Enter。

现在，单击 MessageWithEvent 组件，应用程序将在控制台中发出消息，如下所示。

将额外信息传递给事件处理程序

让我们尝试将额外信息(例如 msgid)传递给事件处理程序。

步骤 1 −首先，更新 logEventToConsole 以接受额外参数 msgid。

logEventToConsole(msgid, e) {
    console.log(e.target.innerHTML);
    console.log(msgid);
}

步骤 2 − 接下来，通过在 render 方法中绑定消息 ID，将消息 ID 传递给事件处理程序。

render() {
   return (
      <div onClick={this.logEventToConsole.bind(this, Math.floor(Math.random() * 10))}>
         <p>Hello {this.props.name}!</p>
      </div>
   );
}

步骤 3 − 完整更新后的代码如下−

import React from 'react';

class MessageWithEvent extends React.Component {
   constructor(props) {
      super(props);

      this.logEventToConsole = this.logEventToConsole.bind();
   }
   logEventToConsole(msgid, e) {
      console.log(e.target.innerHTML);
      console.log(msgid);
   }
   render() {
      return (
         >div onClick={this.logEventToConsole.bind(this, Math.floor(Math.random() * 10))}>
            >p>Hello {this.props.name}!>/p>
         >/div>
      );
   }
}
export default MessageWithEvent;

运行应用程序，你会发现事件在控制台中发出消息 id。