Question

我不知道每次单击按钮时要修改图像（favorite.svg和收藏夹white.sgv）应该怎么做。我努力了，这很难。我使用React。

每次单击按钮时，我都希望图像从“ favourite-white.sgv”更改为“ favourite.sgv”（也从“ favourite.sgv”更改为“ favourite-white.sgv”）。我不知道该怎么办，或者我做错了什么。

import React from 'react';
import logo from './logo.svg';
import './App.css'
import { InstaF4 } from './componentes/card.js';

const usuario = {
  imagemUser: require ('./componentes/img1.jpg'),
  userName: "Caroline"
}

const fotoPrincipal= {
  fotoPrincipal: 'https://picsum.photos/350/290?'
}

const likes = {
  like1: require ('./componentes/icones/favorite-white.svg'),
  like2:require ('./componentes/icones/favorite.svg'),
  comment: require ('./componentes/icones/comment_icon.svg'),
}


class App extends React.Component{
  constructor(props){
      super(props);
      this.state = {
      likeIcon: false,
      };
  }  

botaoCurtido = () =>{
  const semLike = this.state.likeIcon;
  this.setState ({likeIcon : !this.state.likeIcon})
};

/*botaoCurtido = () =>{
  const curtida = likes.like2
  this.setState ({likeIcon : curtida})
  //console.log ("testei")
};*/

render() {
  let likeIcon="";
  const curtida = likes.like2
  //let iconeCurtido = require ('./componentes/icones/favorite.svg');

  if(this.state.likeIcon === true){
    likeIcon = curtida
    console.log ("testeiiii")
    }

  return (
  <div className="dados">
    <InstaF4
    imagemUser={usuario.imagemUser}
    userName = {usuario.userName}

    fotoPrincipal={fotoPrincipal.fotoPrincipal}

    likeIcon = {likes.like1}
    likeIconLiked = {likes.like2}
    commentIcon = {likes.comment}
    curtida = {this.botaoCurtido}

    />

{likeIcon}
  </div>
   ) 
}

}


export default App;

其他页面

import React from 'react';
import './card.css';
import PropTypes from 'prop-types';


export function InstaF4(props){
return (
        <div className="feed">

            <div className="usuario">
                <img src={props.imagemUser} alt="" className="imgUser"/>
                <p>{props.userName}</p>
            </div>
            <div className="foto">
                <img src = {props.fotoPrincipal} alt="" className="fotoPrincipal"/>
            </div>
            <div className="likes">
                <img src = {props.likeIcon} alt="" className="likewhite" onClick={props.curtida} />
                <img src = {props.commentIcon} alt="" className="iconeComentario"/>


            </div>
        </div>
    )
}

InstaF4.propTypes = {
    imagemUser: PropTypes.string.isRequired,
    userName: PropTypes.string.isRequired,
    fotoPrincipal: PropTypes.string.isRequired,
    likeIcon: PropTypes.string.isRequired,
    commentIcon: PropTypes.string.isRequired,
    curtida:PropTypes.func.isRequired,
  }

我点击了按钮，功能被调用，但是图像没有改变。

Answer 1

您正在将其作为道具从您的父母likeIcon ={likes.like1}传递过来，因为它始终是静态的，所以不会改变。您需要通过检查状态this.state.likeIcon

确保传递正确的 like 值

在父组件的render方法中，您传递的 LikeIcon 始终设置为likes.like1。

因此更改该道具以反映最新图标：

likeIcon={this.state.likeIcon ? likes.like2 : likes.like1}

参见下文：

render() {
    return (
      <div className="dados">
        <InstaF4
          imagemUser={usuario.imagemUser}
          userName={usuario.userName}
          fotoPrincipal={fotoPrincipal.fotoPrincipal}

          // This should set the likeIcon as per the boolean variable
          likeIcon={this.state.likeIcon ? likes.like2 : likes.like1}

          commentIcon={likes.comment}
          curtida={this.botaoCurtido} />
      </div>
    );
}

无法更改图标图像（反应）

1 个答案: