如何在 React 中切换按钮并将数字递增 1 或 -1

Question

我正在研究喜欢和不喜欢比率按钮，例如 youtube 概念（唯一投票），我想单击该按钮并将喜欢的值增加 1，不喜欢的值减少 -1。但是当我点击我的按钮时，递增或递减会继续。

我将与您分享我的代码：

const SingleMovieCard = ({singleMovie : {id, title,image ,category, likes, dislikes}, removeMovie}) => {

    const [isLike, setIsLike] = useState(likes);
    const [isDislike, setIsDislike] = useState(dislikes);


    const likeMovie = () =>  setIsLike(isLike + 1);
    const dislikeMovie = () => setIsDislike(isDislike - 1) ;

    return (

        <section key={id} className="single-movie">
            <img src={image} alt={title}/>
            <footer>
                <div className="movie-info">
                    <h2 className="title">{title}</h2>
                    <h4 className="category">{category}</h4>
                </div>  
            

                <div className="ratio-section">
 
                    <div>
                    <i onClick={likeMovie} class="far fa-thumbs-up"></i>
                    <h5>{isLike}</h5>
                    </div>
                    
                    <div>
                    <i onClick={dislikeMovie} class="far fa-thumbs-down"></i>
                    <h5>{isDislike}</h5>
                    </div>

                </div>

                <button className="btn" onClick={()=> removeMovie(id)}>Delete </button>
                
            </footer>
            
        
        </section>
    )
}


export default SingleMovieCard;

该组件的父元素：

import React from 'react';
import SingleMovieCard from '../SingleMovieCard/SingleMovieCard';


const MoviesCards = ({moviesList, removeMovie}) => {
    return (
        <section>        
        <div className="grid-list">
        {moviesList.map((singleMovie)=>  {
        return(
            <SingleMovieCard singleMovie={singleMovie}
                             key={singleMovie.id}
                             removeMovie={removeMovie} />
        )
        })}

        </div>
        </section>
        
    )
}


export default MoviesCards;

这是数据：

export default [
    {
      id: '1',
      title: 'Oceans 8',
      image: 'https://i.ibb.co/8mt68ZB/wp3051367-oceans-8-wallpapers.jpg',
      category: 'Comedy',
      likes: 4,
      dislikes: 1
    }, 
    
    {
      id: '2',
      title: 'Midnight Sun',
      image:' https://i.ibb.co/sCZSNnv/3524235.jpg',
      category: 'Comedy',
      likes: 2,
      dislikes: 0
    }, {
      id: '3',
      title: 'Les indestructibles 2',
      image: 'https://i.ibb.co/M2d5Fnp/923701.jpg',
      category: 'Animation',
      likes: 3,
      dislikes: 1
    },
    ]

Answer 1

据我了解你的问题你需要独特的投票

          const [likeCount setLike] = useState(likes);
          const [dislikeCount, setDislike] = useState(dislikes);

          const [likeState, setLikeState] = useState(false)
          const [dislikeState, setDislikeState] = useState(false)
          const [vote, setVote] = useState(false)

          const [isLike, setIsLike] = useState(0);
          const [isDislike, setIsDislike] = useState(0);


          const likeMovie = () => {
            if(!vote && !likeState) { 
              setLike(likeCount + 1);
                setLikeState(true)
                setVote(true)
            }
            if(vote && likeState) {  
              setLike(likeCount - 1);
                setLikeState(false)
                setVote(false)
            }
          
          } 

          const dislikeMovie = () => {
            if(!vote && !dislikeState) {
             
              setDislike(dislikeCount - 1);
                setDislikeState(true)
                setVote(true)

            }
            if(vote && dislikeState) {   
              setDislike(dislikeCount + 1);
                setDislikeState(false)
                setVote(false)
            }
          
          }

然后

  <div>
            <i onClick={likeMovie} class="far fa-thumbs-up"></i>
            <h5>{likeCount}</h5>
            </div>
            
            <div>
            <i onClick={dislikeMovie} class="far fa-thumbs-down"></i>
            <h5>{dislikeCount}</h5>
            </div>

如何在 React 中切换按钮并将数字递增 1 或 -1

How to toggle a button in React and increment the number by 1 or -1

reactjs

react-toggle