Обрабатывать флажки в реакции

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

Как я вижу в вашем коде, вы в основном хотите сохранить выбранные модули в некотором массиве, скажем, checkItems.if я прав, тогда вы можете сделать это как

<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 для проверки, выбран или нет элемент погоды, и передал объект item методу handleCheckbox. Теперь метод handleCheckbox должен выглядеть следующим образом:

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 должен выглядеть следующим образом

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

надеюсь, что это поможет вам и даст вам понять, как работать с флажком