在反应中处理复选框

Question

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

import React, { useState, useEffect } from 'react';
import { withRouter } from 'react-router-dom';
import { connect } from 'react-redux';
import { getSingleCompany, updateCompany } from '../../actions/companyAction';
import { getAllModules } from '../../actions/moduleAction';
import moment from 'moment';
const SingleCompanyInfo = ({ modules: { all_modules }, history, getAllModules, getSingleCompany, updateCompany, companies: { company_info }, loading: { loading }, match: { params: { company_id } }, error: { error } }) => {
const [formData, setFormData] = useState({
first_name: '',
last_name: '',
email: '',
companyName: '',
sub_domain: '',
status: '',
created_at: '',
address: '',
language_id: '',
currency_id: '',
deleted: '',
companyModules: []
});
const [modules, setModules] = useState([]);

const { first_name, last_name, email, companyName, sub_domain, created_at, status, address, language_id, currency_id, deleted, companyModules } = formData;
useEffect(() => {
if (firstShown) {
getSingleCompany(company_id);
getAllModules()
setFirstShown(false);
}
if (error && error.message) {
_errors.message = error.message;
setErrors(_errors);
};
if (all_modules && all_modules.data && all_modules.data.modules) {
setModules(all_modules.data.modules);
}
}, [getSingleCompany, all_modules, getAllModules, company_id, company_info, error, firstShown])
const handleChange = e => {
setFormData({ ...formData, [e.target.name]: e.target.value });
}


const handleCheckbox = event => {
setCheckedItems({ ...checkedItems, [event.target.name]: event.target.checked });
console.log("checkedItems: ", checkedItems);
}
return (
<div>
<form>
<div className="card">
<div className="card-header">
<h3> Edit Company Info </h3>
</div>
</div>
<div className="card-body">
{formData && !isEmpty(formData) && !loading &&
<>
{
modules && modules.map(item => (
<div className="custom-control custom-checkbox mr-2" key={item.id}>
<label className="custom-control-label" htmlFor={item.id} >
{item.name}
<input
type="checkbox"
className="custom-control-input form-control modules-checkbox"
defaultChecked={true}
id={item.id}
name={item.name}
onChange={handleCheckbox}
/>
</label>
</div>
))
}
{_errors && _errors.message &&
<div>
<input type="hidden" className="form-control is-invalid" />
<div className="invalid-feedback">
{_errors.message}
</div>
</div>
}
</>
}
<div className="card-footer text-left">
<button className="btn btn-blue" onClick={handleCompanyUpdate}>
Update
</button>
<button className="ml-3  btn btn-blue" onClick={() => history.push('/admin/dashboard/companies')}>
Back
</button>
</div>
{loading &&
<div style={{ left: '55%' }}>
<Spinner />
</div>
}
</div>
</form>
</div>
)
}
const mapStateToProps = state => ({
companies: state.companies,
modules: state.modules,
error: state.error,
loading: state.loading
})
export default connect(mapStateToProps, { getAllModules, getSingleCompany, updateCompany })(withRouter(SingleCompanyInfo));

嘿，我是反应新手，目前正在处理一个表单，我有一个模块数组，我想将其映射到复选框中，但我发现很难处理并选中了这些复选框。

if (all_modules && all_modules.data && all_modules.data.modules) {
setModules(all_modules.data.modules);
}


{
modules && modules.map(item => (
<div className="custom-control custom-checkbox mr-2" key={item.id}>
<label className="custom-control-label" htmlFor={item.id} >
{item.name}
<input
type="checkbox"
className="custom-control-input form-control modules-checkbox"
defaultChecked={true}
id={item.id}
name={item.name}
onChange={handleCheckbox}
/>
</label>
</div>
))
}

Answer 1

正如我在您的代码中看到的那样，您基本上希望将选定的模块存储到某个数组中，例如 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方法来检查天气项目是否被选中，并将项目对象传递给handle复选框方法 现在你处理复选框方法应该是这样的

handleCheckbox=(item)=>{
// i assume you are using companyModulesto store selected module's id
let companyModules=formData.companyModules;
if(companyModules.includes(item.id)){
// already checked ,make it unchecked
companyModules.splice(companyModules.indexOf(item.id), 1)
}else{
//its not checked make if checked
companyModules.push(item.id)
}
//now update the formData
formData.companyModules=companyModules
setFormData(formData);
}

现在你的是选择的方法应该是这样的

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

希望这对您有所帮助，并让您清楚地了解如何使用复选框