reactjs限制选中的复选框的数量

import React, { useState } from 'react';

const CheckboxList = () => {
  const [selectedCount, setSelectedCount] = useState(0);

  const handleCheckboxChange = (event) => {
    const isChecked = event.target.checked;
    const newCount = isChecked ? selectedCount + 1 : selectedCount - 1;

    if (newCount > 3) {
      event.target.checked = false; // 取消当前复选框的选中状态
      // 显示错误消息，提示用户已达到选中数量的限制
      alert('最多只能选中3个复选框');
    } else {
      setSelectedCount(newCount);
    }
  };

  return (
    <div>
      <label>
        <input type="checkbox" onChange={handleCheckboxChange} />
        复选框1
      </label>
      <label>
        <input type="checkbox" onChange={handleCheckboxChange} />
        复选框2
      </label>
      <label>
        <input type="checkbox" onChange={handleCheckboxChange} />
        复选框3
      </label>
      <label>
        <input type="checkbox" onChange={handleCheckboxChange} />
        复选框4
      </label>
    </div>
  );
};

export default CheckboxList;