Javascript 如何限制用户在reactjs中选择的复选框不超过三个_Javascript_Reactjs

Javascript 如何限制用户在reactjs中选择的复选框不超过三个

javascript reactjs

Javascript 如何限制用户在reactjs中选择的复选框不超过三个,javascript,reactjs,Javascript,Reactjs,我已经创建了一些代码，用于选择选中或未选中的代码，但是如何将限制设置为不选择超过三个。在这里查看代码这里是我快速制作的东西，只是为了展示一个工作示例（可以更好、更短，但我认为这将有助于使其更易于理解）。如果您需要任何额外的帮助，将很高兴更新我的答案；）从“react”导入{useState}；导入“/styles.css”；常量initialCheckBoxesState=[ {name:“一”，勾选：false}， {name:“2”，勾选：false}， {name:“三”，勾选：f

我已经创建了一些代码，用于选择选中或未选中的代码，但是如何将限制设置为不选择超过三个。

在这里查看代码

这里是我快速制作的东西，只是为了展示一个工作示例（可以更好、更短，但我认为这将有助于使其更易于理解）。如果您需要任何额外的帮助，将很高兴更新我的答案；）

从“react”导入{useState}；
导入“/styles.css”；
常量initialCheckBoxesState=[
{name:“一”，勾选：false}，
{name:“2”，勾选：false}，
{name:“三”，勾选：false}，
{name:“四”，勾选：false}，
{名称：“五”，勾选：假}
];
导出默认函数App（）{
常量[复选框，设置复选框]=使用状态（初始复选框状态）；
const[error，setError]=useState（“”）；
const handleCheckOnClick=（事件）=>{
设置错误（“”）；
设checkBoxIndex=checkBoxes.findIndex(
（box）=>box.name==event.target.name
);
让CopyOfCheckBox=[…复选框]；
让isChecked=CopyOfCheckBox[checkBoxIndex]。已选中；
让amountOfCheckedBoxes=checkbox.filter（（box）=>box.checked）；
如果（！isChecked&&amountOfCheckedBoxes.length>2）{
设置错误（“最多3个复选框”）；
返回；
}
如果（已检查）{
检查框的副本[检查框索引]={
…复选框[复选框索引]的副本，
勾选：假
};
}否则{
检查框的副本[检查框索引]={
…复选框[复选框索引]的副本，
核对：正确
};
}
设置复选框（复选框的副本）；
};
返回(
{复选框.map（（框，索引）=>{
返回(
);
})}
{错误}
);
}

将isChecked状态保留在数组中，并通过切片确保其长度不超过3。有许多方法可以处理它…将max val设置为3，并在（max

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

const initialCheckBoxesState = [
  { name: "one", checked: false },
  { name: "two", checked: false },
  { name: "three", checked: false },
  { name: "four", checked: false },
  { name: "five", checked: false }
];

export default function App() {
  const [checkBoxes, setCheckedBoxes] = useState(initialCheckBoxesState);
  const [error, setError] = useState("");

  const handleCheckOnClick = (event) => {
    setError("");
    let checkBoxIndex = checkBoxes.findIndex(
      (box) => box.name === event.target.name
    );
    let copyOfCheckBoxes = [...checkBoxes];
    let isChecked = copyOfCheckBoxes[checkBoxIndex].checked;
    let amountOfCheckedBoxes = checkBoxes.filter((box) => box.checked);

    if (!isChecked && amountOfCheckedBoxes.length > 2) {
      setError("Max of 3 checked checkboxes");
      return;
    }

    if (isChecked) {
      copyOfCheckBoxes[checkBoxIndex] = {
        ...copyOfCheckBoxes[checkBoxIndex],
        checked: false
      };
    } else {
      copyOfCheckBoxes[checkBoxIndex] = {
        ...copyOfCheckBoxes[checkBoxIndex],
        checked: true
      };
    }

    setCheckedBoxes(copyOfCheckBoxes);
  };

  return (
    <div className="App">
      {checkBoxes.map((box, index) => {
        return (
          <input
            key={index}
            type="checkbox"
            name={box.name}
            onChange={handleCheckOnClick}
            checked={box.checked}
          />
        );
      })}
      <span>{error}</span>
    </div>
  );
}