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

Question

我已经构建了一个简单的消息板，每个注释旁边都有一个星按钮。我的按钮可以正常工作(作为布尔开/关(。我正在尝试添加一个对按钮响应的计数器(如果毫无疑问，请参见恒星，反之亦然(。我想将此值传递给标题中指出"收藏夹数量：n"的元素。关键是要告诉用户他们喜欢多少评论。棘手的部分(无论如何对我来说(都在计算所有星星的真/错误状态。

我已经尝试建造一个柜台，但是我只是不知道如何将这些碎片放在一起。

这是按钮：

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>
  );
}

即使在计数器上，我也不知道我会传递到标题中的DIV元素中，该元素列出了"收藏夹数：n"旁边的计数。我敢肯定，这是包裹在{}中的某个元素，只是不确定是什么。

Answer 1

您需要声明计数器：

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

，然后每次将状态设置为true

时将其递增

setCounter(counter + 1)

和false时减少。然后用{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>
);
}