如何将React类组件转换为函数式组件（附联系页代码示例）

以下是转换后的完整函数式组件代码：

import React, { useState } from "react";
import { Button, Form, FormGroup, Label, Input } from "reactstrap";
import axios from "axios";

const Contacts = () => {
  // 用useState管理表单状态，和原类组件state结构保持一致
  const [formData, setFormData] = useState({
    name: "",
    email: "",
    subject: ""
  });

  // 表单输入变更处理
  const handleChange = e => {
    setFormData(prev => ({
      ...prev,
      [e.target.name]: e.target.value
    }));
  };

  // 表单提交处理
  const handleSubmit = async (e) => {
    e.preventDefault();
    const { name, email, subject } = formData;
    await axios.post("/api/form", {
      name,
      email,
      subject
    });
  };

  return (
    <Form className="col-xs-12 col-md-6" onSubmit={handleSubmit}>
      <FormGroup>
        <Label for="name">name:</Label>
        <Input type="text" name="name" onChange={handleChange} />
      </FormGroup>
      <FormGroup>
        <Label for="exampleEmail">Email:</Label>
        <Input type="email" name="email" onChange={handleChange} />
      </FormGroup>
      <FormGroup>
        <Label for="subject">Subject:</Label>
        <Input type="textarea" name="subject" onChange={handleChange} />
      </FormGroup>
      <Button>Submit</Button>
    </Form>
  );
}

export default Contacts;

核心改动说明 #

• 用useState Hook 替代类组件的this.state + setState状态管理方案，状态结构和原代码完全一致，业务逻辑无变更
• 移除了类组件必要的constructor构造函数、render方法、this绑定逻辑，代码更精简
• 事件处理函数不需要绑定this上下文，直接定义调用即可
• 移除了原代码中未使用的FormText导入，减少冗余依赖

内容的提问来源于stack exchange，提问作者Asrorbek