react限制选择数

import React, { useState } from 'react';

const SelectionComponent = () => {
  const [selectedCount, setSelectedCount] = useState(0);
  const limit = 3; // 限制选择数为3

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

    if (newCount > limit) {
      event.preventDefault(); // 阻止选择操作
      alert(`最多只能选择${limit}个项目`);
      return;
    }

    setSelectedCount(newCount);
  };

  return (
    <div>
      <label>
        <input type="checkbox" onChange={handleSelection} />
        项目1
      </label>
      <label>
        <input type="checkbox" onChange={handleSelection} />
        项目2
      </label>
      <label>
        <input type="checkbox" onChange={handleSelection} />
        项目3
      </label>
      <label>
        <input type="checkbox" onChange={handleSelection} />
        项目4
      </label>
    </div>
  );
};

export default SelectionComponent;