Module 01 · Introduction to React and Class ComponentsReact 与类组件简介

Working with React Class Components: Props and Event HandlingReact 类组件、Props 和事件处理

Coursera ↗

欢迎学习 React Class 组件 的基础课程！通过本视频，你将能够：

定义 React Class 组件
描述 Class 组件的工作原理
说明在 Class 组件中如何管理状态（State）
解释如何在 Class 组件中使用 Props
描述在 Class 组件中如何处理事件

什么是 React Class 组件？

React Class 组件是一个继承自 React.Component 的 JavaScript 类，用于封装 UI 组件及其行为，形成可复用的构建块。

历史背景：在 React 引入 Hooks 之前，Class 组件是定义组件的主要方式。
核心功能：
- 管理状态（State）
- 处理生命周期事件
- 定义组件方法

创建 Class 组件

以下是一个基本的 Class 组件示例：

import React, { Component } from 'react';

class MyComponent extends Component {
    render() {
        return (
            <div>
                <h1>Hello, World!</h1>
            </div>
        );
    }
}

export default MyComponent;

关键点：

导入声明：

import React, { Component } from 'react';
React 是核心库，Component 是基类。

类声明：

class MyComponent extends Component 创建了一个继承自 React.Component 的类组件。

render 方法：

必须包含 render 方法，用于返回组件的 UI（JSX）。

导出组件：

使用 export default MyComponent 允许其他文件导入此组件。

状态管理（State Management）

State 是组件需要渲染并响应用户交互的数据。

状态初始化与更新：

初始化 State：

在构造函数中通过 this.state 定义初始状态。

更新 State：

使用 this.setState 更新状态。

示例代码：State 管理

class EmployeeDetails extends Component {
    constructor(props) {
        super(props);
        this.state = {
            emp_id: '',
            emp_email: ''
        };
    }

    handleInputChange = (event) => {
        const { name, value } = event.target;
        this.setState({ [name]: value });
    };

    render() {
        return (
            <div>
                <input
                    type="text"
                    name="emp_id"
                    value={this.state.emp_id}
                    onChange={this.handleInputChange}
                />
                <input
                    type="email"
                    name="emp_email"
                    value={this.state.emp_email}
                    onChange={this.handleInputChange}
                />
                <button onClick={() => alert(`${this.state.emp_id}, ${this.state.emp_email}`)}>
                    Show Details
                </button>
            </div>
        );
    }
}

工作原理：

实时绑定：输入框的 value 属性绑定到状态，显示当前状态值。
事件触发：onChange 调用 handleInputChange 方法更新状态。
动态显示：当状态更新时，输入框的值实时变化。
显示状态：点击按钮时，alert 显示当前状态值。

Props（属性）

Props 是从父组件传递给子组件的数据，子组件只能读取，不能修改。

父组件到子组件的数据传递

示例代码：使用 Props

父组件：OrganizationDetails.jsx

import React, { Component } from 'react';
import EmployeeDetails from './EmployeeDetails';

class OrganizationDetails extends Component {
    render() {
        return (
            <EmployeeDetails employee_designation="Project Manager" />
        );
    }
}

export default OrganizationDetails;

子组件：EmployeeDetails.jsx

class EmployeeDetails extends Component {
    render() {
        const { employee_designation } = this.props;
        return (
            <div>
                <p>Designation: {employee_designation}</p>
            </div>
        );
    }
}

关键点：

父组件传值：

使用属性（如 employee_designation="Project Manager"）将值传递给子组件。

子组件接收值：

使用 this.props 解构接收传递的值。

事件处理（Event Handling）

React 通过事件处理响应用户交互（如点击、悬停、表单提交等）。

示例：按钮点击事件

<button onClick={() => alert(`ID: ${this.state.emp_id}, Email: ${this.state.emp_email}`)}>
    Show Details
</button>

关键点：

事件绑定：

使用 JSX 的 onClick 属性绑定事件处理方法。

箭头函数：

使用箭头函数在事件中传递状态和 Props 数据。

动态警告：

通过模板字符串构建警告消息。

课程总结

在本视频中，你学习了以下内容：

Class 组件的定义：

React Class 组件是继承自 React.Component 的 JavaScript 类，封装了 UI 和行为。

状态管理：

使用 this.state 初始化状态，this.setState 更新状态。

Props：

父组件通过 Props 向子组件传递数据，子组件通过 this.props 读取数据。

事件处理：

使用 JSX 属性（如 onClick）绑定事件处理逻辑。

通过本课程，你已经掌握了 React Class 组件的核心概念和基本应用。现在可以尝试创建自己的组件并实现状态更新、数据传递与事件处理！🚀