onClick() 仅适用于第一次点击 - React

Question

我试图让 onClick() 函数对每个按钮都有效（结果相同），但到目前为止 onClick() 只有效一次。

如果我再次单击按钮（相同或不同），弹出窗口将不再起作用。

你能帮忙吗？我不知道如何解决它。

function Challange() {
  const [isPopped, setPop] = useState(false);

  const pop = () => {
    setPop(true);
  };

  return (
    <>
      {isPopped && <Dialog2 />}
      <div className="challanges">
        <h1 className="newchallenge">Choose New Challange</h1>
        <button className="challangeBtn" onClick={pop}>
          Eat Vegetarian (31days)
        </button>
        <button className="challangeBtn" onClick={pop}>
          Take the bike to work (14days)
        </button>
        <button className="challangeBtn" onClick={pop}>
          Recycle your plastic bottles (31days)
        </button>
        <button className="challangeBtn" onClick={pop}>
          Use public transport to commute (31days)
        </button>
        <button className="challangeBtn" onClick={pop}>
          Don't fly an airplane (365days)
        </button>
      </div>
    </>
  );
}

export default Challange;

Answer 1

您的弹出函数代码仅将状态设置为 true，因此它永远不会再次为 false。你可以这样改。

const pop = () => {
        setPop(!isPopped);
      };

Answer 2

在您的情况下，setPop 可以采用布尔值或返回布尔值的方法。 React 中句柄切换的最佳实践如下：

const pop = () => {
   setPop(currentValue => !currentValue);
};

另外，使用useCallback 钩子来管理点击等事件并避免在每次渲染时重新初始化你的方法：

const pop = useCallback(() => {
   setPop(currentValue => !currentValue);
}, []);