如何将类组件转换为反应功能答案

【问题标题】：How to convert Class component to function on react如何将类组件转换为反应功能
【发布时间】：2022-01-11 00:00:15
【问题描述】：

我有一个客户反馈页面或更确切地说是一个联系页面。里面有几个。页面是用 JavaScript 编写的，React 在类组件中。我想把它转换成一个功能组件。

下面我将源代码扔出页面

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

class Contacts extends Component {
  constructor(props) {
    super(props);

    this.state = {
      name: "",
      email: "",
      subject: ""
    };
    this.handleChange = this.handleChange.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
  }

  handleChange = e => {
    this.setState({ [e.target.name]: e.target.value });
    //console.log(`${e.target.name}:${e.target.value}`);
  };
  async handleSubmit(e) {
    e.preventDefault();
    const { name, email, subject } = this.state;
    const form = await axios.post("/api/form", {
      name,
      email,
      subject
    });
  }

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

export default Contacts;

【问题讨论】：

标签： javascript reactjs json react-hooks

【解决方案1】：

1- 首先创建一个功能组件，如下所示：

2- 为状态添加一些钩子：

3- 以新的方式重构函数：

4- 最后添加返回部分。

你终于有了这样的东西：

export default function Contacts() {
  const [state, setState] = useState({
    name: '',
    email: '',
    subject: '',
  });

  const handleChange = (e) => {
    setState({ [e.target.name]: e.target.value });
    //console.log(`${e.target.name}:${e.target.value}`);
  };

  const handleSubmit = async (e) => {
    e.preventDefault();
    const { name, email, subject } = state;
    const form = 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>
  );
}

【讨论】：

【解决方案2】：

const Contacts = (props) => {
    const [name, setName] = useState();
    const [email, setEmail] = useState();
    const [subject, setSubject] = useState();

    const handleChange = useCallback((setState, event) => {
        setState(event.target.value);
    }, []);
    
    const handleSubmit = useCallback(async () => {
        const response = await axios.post("/api/form", {
            name,
            email,
            subject
        });
        console.log(response)
    }, [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.bind(null, setName)} />
            </FormGroup>
            <FormGroup>
                <Label for="exampleEmail">Email:</Label>
                <Input type="email" name="email" onChange={handleChange.bind(null, setEmail)} />
            </FormGroup>
            <FormGroup>
                <Label for="subject">Subject:</Label>
                <Input type="textarea" name="subject" onChange={handleChange.bind(null, setSubject)} />
            </FormGroup>
            <Button>Submit</Button>
        </Form>
    );
    
}

【讨论】：