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

打开浏览器并在地址栏中输入 https://127.0.0.1:3000 并按回车键。

现在，点击 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。

打印页面