Javascript ReactJS中的多个和多个选定复选框

所以我开始以一种非常困难的方式学习

我只是偶然发现了一个问题：

复选框。 逻辑应该是这样的（只是它应该如何工作的一个简单示例）：

如果选择了

None

，则无法选择

01

至

05

，则所有内容都将被禁用，所有内容都应更新端点

（此示例有一个流，它将启用

None

，不选中任何复选框，并且应启用

None

，不选中其他复选框，但它将作为示例）

该示例使用DOM确保复选框被选中，但在React中我们有状态，我想了解更多

这是我的第一个练习（甚至没有保存在数据库中）：

import React，{useState，useffect，suspend}来自“React”
从“../../utils/apirl”导入{apirl}
从“../../utils/Auth”导入{getToken}
从“reactstrap”导入{Row，Col，Card，CardBody，Form，FormGroup，Label，Input，Button，Table，CustomInput，Container}；
从“axios”导入axios
从“react router dom”导入{useHistory}；
导出默认功能编辑表（道具）{
const getSheet=（）=>{
常量配置={
标题：{授权：`Bearer${getToken（）}`}
};
get（`${Url}/sheets/${props.id}`，config）
。然后（res=>{
if（资源数据表Aht）{
setAht（资源数据表Aht）
}
否则{
setAht（“”）
}
设置加载（错误）
})
.catch（控制台错误）；
}
子任务表上的常数=e=>{
e、 预防默认值（）
常数newData={
“Aht”：Aht，
}
编辑页（新数据）
} 
const editSheet=async（sheetData）=>{
const myHeaders=新的头（）；
append（“Authorization”，Bearer${getToken（）}`）；
append（“内容类型”、“应用程序/json”）；
const raw=JSON.stringify（sheetData）；
常量请求选项={
方法：'放'，
标题：myHeaders，
身体：生的，
重定向：“跟随”
};
fetch（`${Url}/sheets/${props.id}`，requestOptions）
.then（response=>response.json（））
。然后（结果=>{
如果（result.status==“ok”）{
历史记录。推送（“/仪表板/工作表”）；
}
})
.catch（error=>console.error（`Erro:${error}`））；
};
常量[Aht，setAht]=useState({
num:“”，
被检查：错误
})
常量handleInputChangeHipe=（e）=>{
常数目标=e.target
让numVal=parseInt（target.value）
常数arr=[…Aht]
const newArr=arr.filter（项=>item！==numVal）
const value=target.type==“checkbox”？target.checked:target.value；
if（target.checked）{
塞塔特({
……啊，
num:numVal，
[target.name]：值
})
log（`${numVal}是${value}。应该添加。`）；
}否则{
console.log（newArr）
塞塔特({
……啊，
num:newArr，
[target.name]：值
})
log（`${numVal}是${value}。将不会被添加。`）；
}
}
返回(
{
加载？
卡甘多…：
Aht
}
)
}

上面的这个练习只是为了了解一切是如何工作的，如何检查状态，以及如何保存和编辑端点

但正如你所能想象的，这里充满了流动

我的问题

---

• 首先，我必须使用Axios，因为Fetch不允许我获取端点，但Fetch允许我编辑（在您的代码中，您的状态

  aht

  ）的初始值是空字符串。

  const[aht，setAht]=useState（“”）

  ，您正试图将其分散到数组中

  const arr=[…aht]

  ，因此出现错误
  您需要更改代码的结构，以使复选框（一到四）和无复选框正常工作
  基本上，将一个对象作为状态，并单击复选框更新状态。此外，动态启用和禁用“无”复选框
  代码片段

  import React，{useState}来自“React”；
  导入“/styles.css”；
  导出默认函数App（）{
  常量初始值={
  无：错，
  一:错,，
  二:错,，
  三：错
  };
  常量[Aht，setAht]=使用状态（初始值）；
  常量handleInputChangeHipe=e=>{
  const target=e.target；
  setAht（上一个=>({
  …上一页，
  [target.name]：target.checked？true:false，
  无：错
  }));
  };
  常数handleNone=e=>{
  如果（例如，选中目标）{
  setAht（{…initialValues，none:true}）；
  }否则{
  setAht（上一个=>({
  …上一页，
  无：错
  }));
  }
  };
  返回(
  你好，代码沙盒
  无{“}
  
  
  一{“}
  
  
  两个{“}
  
  
  三{“}
  );
  }
  

  我认为这里的问题是您还没有完全考虑反应方式，而这是c