在 React 中向布尔按钮添加 'count clicks' 函数

Question

我建立了一个简单的留言板，每条评论旁边都有一个星形按钮。我有按钮工作（切换 on/off 作为 bool）。我正在尝试添加一个响应按钮的计数器（如果未单击星号并且 vice-versa，则计数会减少）。我想将此值传递给 header 中声明 "Number of favorites: n" 的元素。重点是告诉用户他们收藏了多少条评论。棘手的部分（无论如何对我来说）是计算所有星星的 true/false 状态。

我尝试过构建一个计数器，但我就是不知道如何将各个部分组合在一起。

这是按钮：

function Favorite() {
  const [state, setState] = useState(true);

  function toggle() {
    state ? setState(false) : setState(true);
  }

  return (
    <div className="Favorite" onClick={toggle} id="clicks">
      {state ? <span>☆</span> : <span> </span>}
    </div>
  );
}

即使有计数器，我也不知道我将什么传递到 header 中的 div 元素，该元素在 "Number of Favorites: n" 旁边列出了计数。我确定它是包含在 {} 中的一些元素，只是不确定是什么。

Answer 1

您需要申报计数器：

 const [counter, setCounter] = useState(0);

然后每次状态设置为真时递增它

setCounter(counter + 1)

假时自减。然后用 {counter}

显示计数器

代码如下：

function Favorite() {

const [state, setState] = useState(true);
const [counter, setCounter] = useState(0);

function toggle() {

setState(!state);
if (state === true) {
  setCounter(counter +1);

} else {
  setCounter(counter -1);

}
}
return (
<div className="Favorite" onClick={toggle} id="clicks">Counter: 
{counter} 
  {state ? <span>☆</span> : <span> </span>}
 </div>
);
}

在 React 中向布尔按钮添加 'count clicks' 函数

Adding a 'count clicks' function to a boolean button in React

reactjs

react-hooks