您可以在切换函数中添加条件。

const handleOptionSelection = (optionKey: string, isChecked: boolean) => {
  let selectedOptionKeysCopy = [...selectedOptionKeys];

  if (isChecked && selectedOptionKeysCopy.length <= maxSelections) {
    selectedOptionKeysCopy = unique([...selectedOptionKeysCopy, optionKey]);
  } else {
    selectedOptionKeysCopy = selectedOptionKeysCopy.filter(
      (selectedOptionKey) => selectedOptionKey !== optionKey
    );
  }

  onChangeSelected(selectedOptionKeysCopy);
};

这是一个sample for reference。

很简单，只要在toggle函数中设置一个条件，检查数据数组的长度是否大于或等于limitedCount。2同时检查limitedCount属性是否已经传递给组件。

更新

此外，您还需要查看用户是否选中了该选项，因此请将检查传递到toggle函数。

const MultiselectCheckbox = ({ options, onChange, limitedCount }) => {
  const [data, setData] = React.useState(options);

  const toggle = (check,value) => {

    // add below line to code
    if(limitedCount && data.length>=limitedCount && check) return;

    const newData = [...data];
    newData.splice(index, 1, {
      label: data[index].label,
      checked: !data[index].checked
    });
    setData(newData);
    onChange(newData.filter(x => x.checked));
  };

  return (
    <>
      {data.map((item, index) => (
        <label key={item.label}>
          <input
            readOnly
            type="checkbox"
            checked={item.checked || false}
            onClick={(e) => toggle(e.target.checked,index)}
          />
          {item.label}
        </label>
      ))}
    </>
  );
};

const options = [{ label: 'Item One' }, { label: 'Item Two' }];

ReactDOM.render(
  <MultiselectCheckbox
    options={options}
    onChange={data => {
      console.log(data);
    }}
  />,
  document.getElementById('root')
);