在反应中更新个人资料图片

Question

我是新手，所以请原谅任何错误。 我想更新用户个人资料图片，但我不知道如何制作可点击的图片 (variable name ->"avatar" in code)，如果我们点击保存，它可以预览然后更新（也在数据库中）。

有人可以帮我添加一个可点击的图像来预览和更新来源和数据库吗？ 如果我们不能制作可点击的图片，一个单独的上传和保存按钮也可以。 如果您需要有关代码的更多信息，请告诉我。 我的代码：

import React from 'react';
import ProfileBanner from '../ProfileBanner';
import coverSrc from 'assets/img/generic/4.jpg';
//import avatar from 'assets/img/team/2.jpg';
import { Col, Row } from 'react-bootstrap';
import ProfileSettings from './ProfileSettings';
//import ExperiencesSettings from './ExperiencesSettings';
//import EducationSettings from './EducationSettings';
//import AccountSettings from './AccountSettings';
import BillingSettings from './BillingSettings';
import ChangePassword from './ChangePassword';
import DangerZone from './DangerZone';
import axios from 'axios';
import Cookies from 'universal-cookie';
import { useEffect ,useState,useRef} from 'react';
import { toast } from 'react-toastify';


 const Settings = () => {
  
  const [formData, setFormData] = useState({
    avatar: '',
    });

  //const { avatar} = formData;
  
  const cookies = new Cookies();
  const user_id = cookies.get('xyz');

  useEffect(async () => {
   
    //e.preventDefault();
    const config = {
      
      headers: {
          "Content-Type": "application/json",

      },
  };
  try {
    
    const { data } = await axios.post(

        `/api/auth/ImageRetrieve`,
        {
          user_id
        },
        config

    );
    
    setFormData({
      avatar:data.link
    });
  } 
  catch (error) {
    toast.success('Something went wrong', {
    theme: 'colored'
  });

  }
  
}, []);
  
  



  return (
    <>
   
      <ProfileBanner>
        
        <div> 
        
           <ProfileBanner.Header
          coverSrc={coverSrc}
          avatar={formData.avatar}
          className="mb-8"
          /> 
          
           
         </div>
        
        
        
      </ProfileBanner>
      
      <Row className="g-3">
        <Col lg={8}>
          <ProfileSettings />
          {/*<ExperiencesSettings />
          <EducationSettings />}*/}
          <br></br>
          <ChangePassword />
        </Col>
        <Col lg={4}>
          <div className="sticky-sidebar">
           {/* <AccountSettings />*/}
            <BillingSettings />
            
            <DangerZone />
          </div>
            </Col>
          </Row>
        </>
      );
    };
    
    export default Settings;

Answer 1

您基本上可以将 onClick 属性添加到任何原生元素，所以

<img src={yourSource} onClick={yourClickHandleFunction}>