Как бы я преобразовал этот (класс загрузки файла) компонент класса в функциональный компонент в React?

Question

Это код загрузки файла, который написан в компонентах класса.

class App extends Component {
  state = {
    selectedFile: null
  };
  fileSelectedHandler = event => {
    this.setState({
      selectedFile: event.target.files[0]
    });
  };
  fileUploadHander = () => {
    Axios.post("");

    render();
    return (
      <div className="App">
        Upload Profile Image
        <input type="file" onChange={this.fileSelectedHandler} />
      </div>
    );
  };
}

Я пытаюсь добавить кнопку загрузки файла на мою страницу формы входа. Тем не менее, руководство, которое я нашел в Интернете, написало код в компонентах класса, а мой код написан в функциональных компонентах. Как мне импортировать код в существующий код? Для справки я предоставил оба набора кодов.

Это мой действительный код страницы формы входа, написанный на функциональных компонентах.

import React from "react";
import { Formik } from "formik";
import * as Yup from "yup";
import Error from "./Error";
import { render } from "@testing-library/react";
import Axios from "axios";

const ValidationSchema = Yup.object().shape({

firstname: Yup.string()
    .min(1, "Too Short!")
    .max(255, "Too Long!")
    .required("Required"),

lastname: Yup.string()
    .min(1, "Too Short!")
    .max(255, "Too Long!")
    .required("Required"),

name: Yup.string()
    .min(1, "Too Short!")
    .max(255, "Too Long!")
    .required("Required"),

pass: Yup.string()
    .min(1, "Too Short!")
    .max(255, "Too Long!")
    .required("Required"),

email: Yup.string()
    .email("Must be an email address")
    .max(255, "Too Long!")
    .required("Required")
});

export default function FormikForm() 

{

  return (

    <Formik
      initialValues={{
        name: "",
        pass: "",
        email: "",

      }}
      validationSchema={ValidationSchema}
      validate={values => {
        let errors = {};

        return errors;
      }}
      onSubmit={(values, { setSubmitting, resetForm }) => {
        setSubmitting(true);

        console.log("submit: ", values);

        setTimeout(() => {
          alert(JSON.stringify(values, null, 2));
          resetForm();
          setSubmitting(false);
        }, 500);
      }}
    >
      {


      ({
        values,
        errors,
        touched,
        handleChange,
        handleBlur,
        handleSubmit,
        isSubmitting,
        setFieldValue
      }) => (
        <form onSubmit={handleSubmit}>
          <h2>Create an Account</h2>

            <div className="input-row">
            <label>First Name</label>
            <input
              type="text"
              name="firstname"
              onChange={handleChange}
              onBlur={handleBlur}
              value={values.firstname}
              className={touched.firstname && errors.firstname ? "has-error" : null}

            />
            <Error touched={touched.firstname} message={errors.firstname} />
            <label>Last Name</label>
            <input
              type="text"
              name="lastname"
              onChange={handleChange}
              onBlur={handleBlur}
              value={values.lastname}
              className={touched.lastname && errors.lastname ? "has-error" : null}
            />
            <Error touched={touched.lastname} message={errors.lastname} />

          </div>

          <div className="input-row">
            <label>Username</label>
            <input
              type="text"
              name="name"
              onChange={handleChange}
              onBlur={handleBlur}
              value={values.name}
              className={touched.name && errors.name ? "has-error" : null}
            />
            <Error touched={touched.name} message={errors.name} />
          </div>

          <div className="input-row">
            <label>Password</label>
            <input
              type="text"
              name="pass"
              onChange={handleChange}
              onBlur={handleBlur}
              value={values.pass}
              className={touched.pass && errors.pass ? "has-error" : null}
            />
            <Error touched={touched.pass} message={errors.pass} />
          </div>

          <div className="input-row">
            <label>Email</label>
            <input
              type="text"
              name="email"
              onChange={handleChange}
              onBlur={handleBlur}
              value={values.email}
              className={touched.email && errors.email ? "has-error" : null}
            />
            <Error touched={touched.email} message={errors.email} />
          </div>

          {}
          <div className="input-row">
            <button type="submit" disabled={isSubmitting}>
              Submit
            </button>
          </div>
          <div>           
    <a href="/LoginForm.jsx">Already have an account?</a>

</div>
        </form>       
      )}
    </Formik>

  );
}

Answer 1

Преобразование вашего компонента класса в ловушку будет выглядеть следующим образом:

import React from 'react';

function App() {
  const [selectedFile, setSelectedFile] = React.useState(null);

  const fileSelectedHandler = event => {
    setSelectedFile(event.target.files[0]);
  };

  const fileUploadHander = () => {
    Axios.post("...");
  }  

  return (
    <div className="App">
      Upload Profile Image
      <input type="file" onChange={(event) => fileSelectedHandler(event)}></input>
    </div>
  );
}

export default App;

Далее вы можете перейти по этой ссылке, чтобы получить доступ к различным методам преобразования: [https://www.digitalocean.com/community/tutorials/five-ways-to-convert-react-class-components-to-functional-components-with-react-hooks]