如何通过单击反应js中的按钮将值增加+1答案

【问题标题】：how to increment value by +1 by clicking button in react js如何通过单击反应js中的按钮将值增加+1
【发布时间】：2021-07-23 18:12:12
【问题描述】：

当我点击喜欢按钮时遇到问题，我希望它增加 +1，谁能告诉我该怎么做，我尝试了，但我无法解决。下面我分享我用来制作我的小应用程序的所有代码。如果您有任何问题，请随时问我。

音乐.js

这是我编写整个代码的音乐形式。

import React, { useState, useRef, useEffect } from 'react';
import { makeStyles } from '@material-ui/core/styles';
import AppBar from '@material-ui/core/AppBar';
import Toolbar from '@material-ui/core/Toolbar';
import Typography from '@material-ui/core/Typography';
import Button from '@material-ui/core/Button';
import IconButton from '@material-ui/core/IconButton';
import MenuIcon from '@material-ui/icons/Menu';
import ExitToAppIcon from '@material-ui/icons/ExitToApp';
import RadioIcon from '@material-ui/icons/Radio';
import firebase from '../Firebase';
import SearchBar from "material-ui-search-bar";
import { useHistory } from 'react-router-dom';
import { Container, Input, TextField } from '@material-ui/core';
import './Music.css';
import Table from '@material-ui/core/Table';
import TableBody from '@material-ui/core/TableBody';
import TableCell from '@material-ui/core/TableCell';
import TableContainer from '@material-ui/core/TableContainer';
import TableHead from '@material-ui/core/TableHead';
import TableRow from '@material-ui/core/TableRow';
import Paper from '@material-ui/core/Paper';
import ThumbUpAltIcon from '@material-ui/icons/ThumbUpAlt';
// import { useSelector } from 'react-redux';




const useStyles = makeStyles((theme) => ({
    root: {
        flexGrow: 1,
    },
    menuButton: {
        marginRight: theme.spacing(2),
    },
    title: {
        flexGrow: 1,
    },
    search: {
        marginTop: 30,
    },
    table: {
        minWidth: 650,
        marginBottom: 10,
    },
    cells: {
        marginTop: 50,
    },
    thumb: {
        color: '#e75480',
    },
    name: {
        color: 'blue',
        padding: 10,
        fontSize: 20,
    },
    audios: {
        display: 'flex',
        margin: 'auto',
        height: 50,
        width: 500,
        alignItems: 'center'
    },
    icon: {
        fontSize: 40,
        color: '#e75480',
        cursor:'pointer'
    }
}));

const Music = () => {

    const history = useHistory();
    const inputRef = useRef(null);
    const [search, setSearch] = useState("");
    const [like, setLike] = useState(false);

    const [music,setMusics] = useState([
        {
            id:"1",
            name:"Arijit singh",
            audiosrc:"https://upload.wikimedia.org/wikipedia/commons/1/15/Bicycle-bell.wav",
        },
        {
            id:"2",
            name:"Atif Aslam",
            audiosrc:"https://upload.wikimedia.org/wikipedia/commons/1/15/Bicycle-bell.wav",
        },
        {
            id:"3",
            name:"Sonu Nigam",
            audiosrc:"https://upload.wikimedia.org/wikipedia/commons/1/15/Bicycle-bell.wav",
        },
        {
            id:"4",
            name:"Neha kakkar",
            audiosrc:"https://upload.wikimedia.org/wikipedia/commons/1/15/Bicycle-bell.wav",
        },
    ])


     const likeButton = (id)=>{
         const likebuttons = music.find((curElem)=>{
            return curElem.id == id
         })
         setLike({likebuttons:like+1})
         console.log(likebuttons);
     }
    console.log(search);


    // Logout Functionality
    const Logout = () => {
        firebase.auth().signOut().then(() => {
            alert("Logout Successfull...");
            history.push('/');
        }).catch((error) => {
            console.log(error);
        });
    }

    const classes = useStyles();

    return (
        <div className={classes.root}>
            <AppBar position="static" style={{ width: '100%' }}>
                <Toolbar>
                    <IconButton edge="start" className={classes.menuButton} color="inherit" aria-label="menu">
                        <RadioIcon style={{ fontSize: "30px" }} />&nbsp; React Music
                    </IconButton>
                    <Typography variant="h6" className={classes.title}>
                    </Typography>
                    <Button color="inherit" onClick={Logout}> <ExitToAppIcon /> Logout </Button>
                </Toolbar>
            </AppBar>
            <Container>
                <SearchBar className={classes.search}
                    value={search}
                    onChange={(newValue) => setSearch(newValue)}
                />
                <Table className={classes.table} aria-label="simple table">
                    <TableBody>
                        {music && music.map(mus=>{
                            return(
                                <TableRow>
                                <TableCell style={{ display: 'flex', justifyContent: 'space-around' }}>
                                    <div>
                                        <h3>{like} <ThumbUpAltIcon className={classes.icon} onClick={()=>likeButton(music.id)} /> {mus.name}</h3>
                                    </div>
                                    <div>
                                        <audio ref={inputRef} src={mus.audiosrc} className={classes.audios} controls />
                                    </div>
                                </TableCell>
                            </TableRow>
                            )
                        })}
                    </TableBody>
                </Table>
            </Container>

        </div>
    );
}

export default Music;

【问题讨论】：

您喜欢的类型是布尔值，尝试在使用率中传递一个数字而不是 false

标签： reactjs react-hooks material-ui

【解决方案1】：

由于 ref 是可变的并且在组件的整个生命周期内都存在，因此我们可以在更新时使用它来购买当前费用，并且仍然可以在我们的 useEffect 的清理函数中访问该 page 值通过裁判的价格。当前的财物。

【讨论】：

【解决方案2】：

首先您需要将类型设置为数字而不是布尔值

const [like, setLike] = useState(0);

然后

const likeButton = (id)=>{
         const likebuttons = music.find((curElem)=>{
            return curElem.id == id
         })
         setLike(likebuttons+1);
         console.log(likebuttons);
     }

或者

您可以添加否。相同数组对象中的点赞数，只需更新该点赞字段

您可以查看以下为您创建的示例。希望对你有帮助。

只有类似的功能

import "./styles.css";
import React, { useState } from "react";
export default function App() {
  const [likedSong, setLikedSong] = useState({
    likes: 0,
    id: 0
  });
  const [music, setMusics] = useState([
    {
      id: "1",
      name: "Arijit singh",
      audiosrc:
        "https://upload.wikimedia.org/wikipedia/commons/1/15/Bicycle-bell.wav",
      likes: 0
    },
    {
      id: "2",
      name: "Atif Aslam",
      audiosrc:
        "https://upload.wikimedia.org/wikipedia/commons/1/15/Bicycle-bell.wav",
      likes: 0
    },
    {
      id: "3",
      name: "Sonu Nigam",
      audiosrc:
        "https://upload.wikimedia.org/wikipedia/commons/1/15/Bicycle-bell.wav",
      likes: 0
    },
    {
      id: "4",
      name: "Neha kakkar",
      audiosrc:
        "https://upload.wikimedia.org/wikipedia/commons/1/15/Bicycle-bell.wav",
      likes: 0
    }
  ]);
  const handleLike = (list) => {
    if (likedSong.id === list.id) {
      setLikedSong({ ...likedSong, id: list.id, likes: ++likedSong.likes });
    } else {
      setLikedSong({ ...likedSong, id: list.id, likes: 0 });
    }
  };
  return (
    <div className="App">
      {music.map((mus) => (
        <div key={mus.id} className="music-list">
          <div>
            {mus.id === likedSong.id && (
              <span className="no-likes">{likedSong.likes}</span>
            )}
            <span className="btn-like" onClick={() => handleLike(mus)}>
              Like
            </span>
            {mus.name}
          </div>
        </div>
      ))}
    </div>
  );
}

直播工作demo

【讨论】：

我做到了，但它不起作用，感谢您付出宝贵的时间
@MonuPatil 你能检查提供的例子吗...我希望它能帮助你

【解决方案3】：

首先，你应该改变你的状态。每首音乐都有自己的类似编号，因此您不能对所有人都使用 1 个类似的状态。音乐数组中的每个项目都应该有一个值来存储它自己的数字。类似：

const [music,setMusics] = useState([
      {
         id:"1",
         name:"Arijit singh",
         audiosrc:"https://uploa...",
         likeNumbers:0,
       },
    ...
    ]

然后你的 onClick 应该迭代音乐数组，找到点击的项目并改变它的 likeNumbers 值。像这样：

cosnt handleClick = (id) => {
    setMusic((prevState) => prevState.map((item) => {
        if (item.id === id ) {
            return {...item, likeNumbers:likeNumbers + 1 }       
        } else {
            return item
        }
    })
}

要清楚：首先，您应该获取状态的最后一个版本，然后在迭代过程中，找到单击的项目并更新它。为了避免改变你的状态（因为项目是对象），你应该先复制，然后改变它。我的意思是：

return {...item, likeNumbers:likeNumbers + 1 }

毕竟你的 jsx 代码的一部分应该改为：

<h3>{mus.likeNumber} <ThumbUpAltIcon className={classes.icon} onClick={()=>likeButton(music.id)} /> {mus.name}</h3>

【讨论】：

【解决方案4】：

如果您想对所有音乐数据进行点赞，

首先你应该改变状态来存储对象

const [like, setLike] = useState({});

更改您的like按钮功能以将数据存储在对象中

const likeButton = (musicId)=>{
  setLike({...like, like[musicId]: like[musicId] + 1 || 1 })
}

现在更改您的显示方式，如下所示：

<div>
  <h3>{like[music.id]} <ThumbUpAltIcon className={classes.icon} onClick={()=>likeButton(music.id)} /> {mus.name}</h3>
</div>

【讨论】：

【解决方案5】：

在您的代码中进行以下更改：

const [like, setLike] = useState(false);

到

const [like, setLike] = useState(0);

和

setLike({likebuttons:like+1})

到

setLike(like+1);

然后再试一次。

【讨论】：

我做到了，但它不起作用，感谢您付出宝贵的时间