reactjs - 我的点击处理程序在 React 中使用不同的值触发两次

Question

我一生都无法弄清楚为什么我的 onClick 处理程序被调用了两次......

import "./styles.css";
import React, { useState } from "react";

export const AllModels = ({
  label,
  name,
  checked,
  handleSelectAll
}: {
  label: string;
  name: string;
  checked: boolean;
  handleSelectAll: () => void;
}) => {
  return (
    <div>
      <div className="checkbox" onClick={handleSelectAll}>
        <input
          className="checkbox-input"
          id="all-models"
          type="checkbox"
          name={name}
          value={`${checked}`}
        />
        <label className="label label--checkbox" htmlFor="all-models">
          <span className="label-title">{label}</span>
        </label>
      </div>
    </div>
  );
};

export const App = (): React.ReactElement => {
  const [allModelsChecked, setAllModelsChecked] = useState<boolean>(false);

  const handleSelectAll = (): void => {
    console.log({ allModelsChecked });
    if (allModelsChecked) {
      setAllModelsChecked(false);
    } else {
      setAllModelsChecked(true);
    }
  };

  return (
    <AllModels
      label="All Models"
      name="allModels"
      checked={allModelsChecked}
      handleSelectAll={handleSelectAll}
    />
  );
};

控制台日志显示

{allModelsChecked: false}
{allModelsChecked: true}

我在运行 React.StrictMode ，但据我所知，我不相信我正在改变状态。
工作示例: https://codesandbox.io/s/quizzical-tree-gzofx?file=/src/App.tsx

Answer 1

输入 type=checkbox接受输入标签的检查 Prop 。将值更改为已检查，这将解决问题

<input
 className="checkbox-input"
 id="all-models"
 type="checkbox"
 name={name}
 // value={`${checked}`}
 checked={checked}
/>

您可以在此 codesandbox 中看到事件日志链