我在基于 class 的 reactjs 代码中有下面的照片上传器代码，我希望它在基于功能的工作代码中

Question

我是新来的反应。我在下面的基于 class 的 reactjs 代码及其工作中有照片上传器的代码，但我希望它在基于反应功能的工作代码中。如果对同一个项目有任何其他建议使用更合适和更清晰的代码，那么我将不胜感激。

代码如下：

import React, { Component } from 'react';
import './App.css';
export class App extends Component {
  state={
    profileImg:'https://cdn.pixabay.com/photo/2015/10/05/22/37/blank-profile-picture-973460_960_720.png'
  }
  imageHandler = (e) => {
    const reader = new FileReader();
    reader.onload = () =>{
      if(reader.readyState === 2){
        this.setState({profileImg: reader.result})
      }
    }
    reader.readAsDataURL(e.target.files[0])
  };
    render() {
    const { profileImg} = this.state
        return (
            <div className="page">
                <div className="container">
                    <h1 className="heading">Add your Image</h1>
                    <div className="img-holder">
                        <img src={profileImg} alt="" id="img" className="img" />
                    </div>
                    <input type="file" accept="image/*" name="image-upload" id="input" onChange={this.imageHandler} />
                    <div className="label">
          <label className="image-upload" htmlFor="input">
                        <i className="material-icons">add_photo_alternate</i>
                        Choose your Photo
                    </label>
          </div>
                </div>
            </div>
        );
    }
}

export default App;

我想要工作功能基于 React 的组件代码。我希望将照片上传器集成到我的项目中。

Answer 1

import React, { useState } from "react";
import "./App.css";

export default function App() {
  const [profileImage, setProfileImage] = useState(
    "https://cdn.pixabay.com/photo/2015/10/05/22/37/blank-profile-picture-973460_960_720.png"
  );

  const imageHandler = (e) => {
    const reader = new FileReader();
    reader.onload = () => {
      if (reader.readyState === 2) {
        setProfileImage(reader.result);
      }
    };
    reader.readAsDataURL(e.target.files[0]);
  };

  return (
    <>
      <div className="page">
        <div className="container">
          <h1 className="heading">Add your Image</h1>
          <div className="img-holder">
            <img src={profileImage} alt="" id="img" className="img" />
          </div>
          <input
            type="file"
            accept="image/*"
            name="image-upload"
            id="input"
            onChange={imageHandler}
          />
          <div className="label">
            <label className="image-upload" htmlFor="input">
              <i className="material-icons">add_photo_alternate</i>
              Choose your Photo
            </label>
          </div>
        </div>
      </div>
    </>
  );
}

查看此博客React functional Component

我在基于 class 的 reactjs 代码中有下面的照片上传器代码，我希望它在基于功能的工作代码中

i have the code for photo uploader below in class based reactjs code and i want it in functional based working code

photo-upload

reactjs

react-hooks

react-forms