Блог

мне нужно сделать похожий значок реакции, когда кто-то нажимает на один значок, счетчик увеличивается на единицу, и когда он нажимает на другие значки, это уменьшает предыдущие значки, а затем увеличивает то, на что нажимает. итак, это мой код, он будет выглядеть как смайлики с интерфейсом для каждого из них, и вам нужно нажать на один из этих смайликов, затем увеличить количество на единицу.

 import logo from './logo.svg';
import React, { useState } from 'react';

import './App.css';
let emojis = [
  {
    "id":"0",
    "reactionName": "disLike",
    "pic": "logo",
    "PreCounter":20,
  },
  {
    "id":"1",
    "reactionName": "like",
    "pic": "logo",
    "PreCounter":2,
  },

  {
    "id":"2",
    "reactionName": "disLike",
    "pic": "logo",
    "PreCounter":0,
  },
  {
    "id":"3",
    "reactionName": "like",
    "pic": "logo",
    "PreCounter":20,
  },]

function App() {
  return (
    <div className="App">
    {
        emojis.map(({id,reactionName, pic,PreCounter}) => {
        return <Emoji
        key={id}
        reactionName={reactionName}
        pic={pic}
        PreCounter={PreCounter}
        />
      })
    }

    </div>
  );
}

export default App;
function Emoji (props){
  const { key,reactionName, pic,PreCounter  } = props;
  const [count, setCounter] = useState(PreCounter);
  const [selectedName, setSelectedName] = useState("noReaction");
  const [selected, setSelected] = useState(false);

  const handleClick = (e) => {

    setSelectedName(e.target.getAttribute("name"));
        if (selected) {
          setCounter(count - 1);
          setSelected(false);
        }else {
          setCounter(count   1);
          setSelected(true);
        }

  };
return(
  <button onClick={handleClick} name={reactionName} value={count} id={key}>
  <img src={pic}  alt="logo" width="20"/>
  {count}
  </button>

);

}  

Я не мог знать, как я могу изменить значение предыдущего клика ,

Я не знаю, это то, чего вы хотите

 function Emoji(props) {
  const { id, reactionName, pic, PreCounter, handleClick } = props;
  
  return (
    <button onClick={handleClick} name={reactionName id} value={PreCounter} id={id}>
      {/* <img src={pic}  alt="logo" width="20"/> */}
      {PreCounter}
    </button>
  );
}

let emojis = [
  {
    id: '0',
    reactionName: 'disLike',
    pic: 'logo',
    PreCounter: 20,
  },
  {
    id: '1',
    reactionName: 'like',
    pic: 'logo',
    PreCounter: 2,
  },
  {
    id: '2',
    reactionName: 'disLike',
    pic: 'logo',
    PreCounter: 0,
  },
  {
    id: '3',
    reactionName: 'like',
    pic: 'logo',
    PreCounter: 20,
  },
];

function useAppCount() {
  const [list, listCallBack] = useState(emojis)

  return [list, listCallBack]
}

function App() {
  const [list, listCallBack] = useAppCount()

  const handleClick = e => {
    const id = e.target.getAttribute('id')
    const data = list.map(r => {
      if (r.isClick) {
        r.isClick = false
        r.PreCounter -= 1
      }
      if (r.id === id) {
        r.isClick = true
        r.PreCounter  = 1
      }
      return r
    })
    listCallBack(() => data)
  }
  return (
    <div className="App">
      {list.map(({ id, reactionName, pic, PreCounter }) => {
        return <Emoji key={id} id={id} reactionName={reactionName} pic={pic} PreCounter={PreCounter} handleClick={handleClick} />;
      })}
    </div>
  );
}

export default App;