Reactjs 在react中处理复选框

Reactjs 在react中处理复选框,reactjs,react-hooks,Reactjs,React Hooks,我是个新手,很难理解如何处理复选框我正在打印一系列模块,但我发现很难理解如何处理它们并动态检查它们 这是我的密码 import React,{useState,useffect}来自“React”; 从“react router dom”导入{withRouter}; 从'react redux'导入{connect}; 从“../../actions/companyAction”导入{getSingleCompany,updateCompany}; 从“../../actions/modul

我是个新手,很难理解如何处理复选框我正在打印一系列模块,但我发现很难理解如何处理它们并动态检查它们 这是我的密码

import React,{useState,useffect}来自“React”;
从“react router dom”导入{withRouter};
从'react redux'导入{connect};
从“../../actions/companyAction”导入{getSingleCompany,updateCompany};
从“../../actions/moduleAction”导入{getAllModules};
从“力矩”中导入力矩;
const SingleCompanyInfo=({modules:{all_modules},history,getAllModules,getSingleCompany,updateCompany,companys:{company_info},loading:{loading},match:{params:{company_id},error:{error})=>{
常量[formData,setFormData]=useState({
名字:'',
姓氏:“”,
电子邮件:“”,
公司名称:'',
子域:“”,
状态:“”,
在以下位置创建了\u:“”,
地址:'',
语言\u id:“”,
货币id:“”,
已删除:“”,
公司模块:[]
});
const[modules,setModules]=useState([]);
const{first_name,last_name,email,companyName,sub_domain,created_at,status,address,language_id,currency_id,deleted,companyModules}=formData;
useffect(()=>{
如果(首先显示){
getSingleCompany(公司id);
getAllModules()
SetFirstShowed(假);
}
if(错误和错误消息){
_errors.message=error.message;
设置错误(_错误);
};
if(所有模块和所有模块.data和所有模块.data和所有模块.data.modules){
setModules(所有_模块、数据模块);
}
},[getSingleCompany,所有模块,GetAllModule,公司id,公司信息,错误,首次显示])
常量handleChange=e=>{
setFormData({…formData,[e.target.name]:e.target.value});
}
const handleCheckbox=事件=>{
setCheckedItems({…checkedItems[event.target.name]:event.target.checked});
log(“checkedItems:,checkedItems”);
}
返回(
编辑公司信息
{formData&!isEmpty(formData)&&!正在加载&&
{
modules&&modules.map(项=>(
{item.name}
))
}
{u errors&&&u errors.message&&
{{u errors.message}
}
}
更新
history.push('/admin/dashboard/companys')}>
返回
{加载&&
}
)
}
常量mapStateToProps=状态=>({
公司:国有企业,
模块:state.modules,
错误:state.error,
加载:state.loading
})

导出默认连接(mapStateToProps,{getAllModules,getSingleCompany,updateCompany})(使用路由器(SingleCompanyInfo))正如我在您的代码中看到的,您基本上希望将选定的模块存储到某个数组,比如checkedItems。如果我是对的,那么您可以这样做

<input type="checkbox" className="custom-control-input form-control modules-checkbox"   id={item.id} name={item.name} 
checked={isSelected(item.id)}
onChange={()=>{handleCheckbox(item)}}
                  />
现在,您的isSelected方法应该如下所示

isSelected=(id)=>{
  return formData.companyModules.includes(id)
}

希望这将帮助您并让您清楚如何使用复选框

您能具体说明您面临的问题吗???@JatinParmar实际上我正在进行api调用,我得到了一个模块列表,我想创建一些复选框并动态处理它们请提供您的组件的代码我已经编辑了发布并提供代码我已经添加了我的答案,请检查它谢谢,但它不起作用,我想打印出所有模块,并检查来自单一公司信息的选定模块并处理它们。。
isSelected=(id)=>{
  return formData.companyModules.includes(id)
}