0

Tengo un formulario, cuyo objetivo es editar los derechos de acceso para un usuario. EL problema consiste en que cuando traigo los datos de una API (la cual funciona correctamente y está hecha en PHP) los datos de cada uno de los campos que van a los checkbox son 1 y 0. Dónde 1 es verdadero y 0 es falso. ¿Qué tengo que hacer para que en la interfaz al cargar me haga el check automáticamente al cargar los datos?, o bien, ¿Alguna recomendación de lo que tengo que hacer?.

Código:

import { useEffect, useState } from "react";
import { Link, useParams } from "react-router-dom";
 
  

const Editarusuarios = () => {   
    const { id } = useParams(); 
     

    useEffect(() => {
     const datosuser={Id_usuario:sessionStorage.getItem("Iduser")};   
                
     fetch("http://localhost/API/Catalogos/Usuarios/SP_Verificar_DerechoXIDUsuario.php",{
       method:"POST",
       body:JSON.stringify(datosuser)
      })
       .then(respuesta=>respuesta.json())
       .then((datosRespuesta)=>{  
         let Acceso =  datosRespuesta[0]["Cat_usuarios"]; 
         switch (Acceso) {
                 case "1":
                        try {
                             ///----Ver el usuario X ID al que se le va modificar
                             fetch("http://localhost/API/Catalogos/Usuarios/SP_Ver_Usuario_XID.php"+"?Id="+ id)
                             .then(respuesta=>respuesta.json())
                             .then((respuesta)=>{  
                                   nicknamechange(respuesta[0].Nickname_usuario);
                                   nomcompchange(respuesta[0].Nomcom);  
                                   clavechange(respuesta[0].clave); 
                                   setCatusers(respuesta[0].Cat_usuarios);
                                   setCatenfer(respuesta[0].Cat_enfermedades);
                                   setCatenfed(respuesta[0].Cat_entidad_fed);
                                   setCatespecia(respuesta[0].Cat_especialidades);
                                   setCatesta(respuesta[0].Cat_estatus);
                                   setCatfampacient(respuesta[0].Cat_familiar_paciente);
                                   setCatdetfampac(respuesta[0].Cat_detalle_familiar_paciente);
                                   setCatfamperso(respuesta[0].Cat_familiar_personal); 
                                   setCatdetfamperso(respuesta[0].Cat_detalle_familiar_personal);
                                   setCatgen(respuesta[0].Cat_genero);   
                                   sethistrialmed(respuesta[0].Historial_medico);
                                   setCatmun(respuesta[0].Cat_municipio);
                                   setCatocup(respuesta[0].Cat_ocupacion);
                                   setCatpacient(respuesta[0].Cat_paciente);
                                   setCatpartescuerp(respuesta[0].Cat_partes_cuerpo);
                                   setCatpersonal(respuesta[0].Cat_personal);
                                   setCatprocquir(respuesta[0].Cat_procedimiento_quir);
                                   setCatsuc(respuesta[0].Cat_Sucursal); 
                                   setCattipofam(respuesta[0].Cat_tipo_familiares); 
                              }
                             )
                             .catch(console.log)   
                        } catch (error) {
                           console.log(error);
                        }  
                break;

                case "0":
                    alert("No tiene derecho a la página.");
                    window.location.href = "/Home";
                break;                         
     
                case null: 
                    alert("No tiene derecho a la página.");
                    window.location.href = "/Home";                                                                               
                break;
         }           
        }
        )
         .catch(console.log)
      }, []);   

      const [txtnomcomp, nomcompchange]=useState("");
      const [txtnickname, nicknamechange]=useState(""); 
      const [txtclave, clavechange]=useState(""); 
      const [checkcatuser, setCatusers]=useState(""); 
      const [checkcatenfer, setCatenfer]=useState("");   
      const [checkcatentfed, setCatenfed]=useState("");
      const [checkcatespe, setCatespecia]=useState("");
      const [checkcatestatus, setCatesta]=useState("");
      const [checkcatfampac, setCatfampacient]=useState("");
      const [checkcatdetfampac, setCatdetfampac]=useState("");
      const [checkcatfamper, setCatfamperso]=useState("");
      const [checkcatdetfamper, setCatdetfamperso]=useState("");
      const [checkcatgen, setCatgen]=useState("");
      const [checkhistmed, sethistrialmed]=useState("");
      const [checkcatmun, setCatmun]=useState("");
      const [checkcatocup, setCatocup]=useState("");
      const [checkcatpac, setCatpacient]=useState("");
      const [checkcatpartcuerp, setCatpartescuerp]=useState("");
      const [checkcatpersonal, setCatpersonal]=useState("");
      const [checkcatprocquir, setCatprocquir]=useState("");
      const [checkcatsuc, setCatsuc]=useState("");
      const [checkcattipfam, setCattipofam]=useState("");
      
      const handlecheckChangecatuser=(e)=>{
              const checkcatuser = e.target.checked;         
               if(checkcatuser){
                  setCatusers(1);                   
                  //console.log(checkcatuser);
                  checkcatuser=true;
               }
               else
               { 
                  setCatusers(0); 
                  checkcatuser=false;
                  //console.log(checkcatuser);
               }  
       }

       const handlecheckChangecatenfer=(e)=>{
             const checkcatenfer = e.target.checked;
            if(checkcatenfer)
            { 
                setCatenfer(1); 
                checkcatenfer=true;
            }  
            else
            {
                setCatenfer(0);
                checkcatenfer=false;
            }
       }
        
       const handlecheckChangecatentfed=(e)=>{
          const checkcatentfed = e.target.checked;
          if(checkcatentfed)
          { 
                setCatenfed(1); 
         }  
         else
          {
              setCatenfed(0);
          }
       }

       const handlecheckChangeCatespecia=(e)=>{
           const checkcatespe = e.target.checked;
           if(checkcatespe)
           { 
             setCatespecia(1); 
           }  
          else
          {
             setCatespecia(0);
          }
       }

       const handlecheckChangeCatesta=(e)=>{
          const checkcatestatus = e.target.checked;
          if(checkcatestatus)
          { 
             setCatesta(1); 
          }  
          else
          {
             setCatesta(0);
          }
       }

       const handlecheckChangeCatfampacient=(e)=>{
            const checkcatfampac = e.target.checked;
            if(checkcatfampac)
            { 
                setCatfampacient(1); 
            }  
           else
           {
               setCatfampacient(0);
           }
        }

        const handlecheckChangeCatdetfampac=(e)=>{
            const checkcatdetfampac = e.target.checked;
            if(checkcatdetfampac)
            { 
                setCatdetfampac(1); 
            }  
           else
           {
               setCatdetfampac(0);
           }
        }

        const handlecheckChangeCatfamperso=(e)=>{
            const checkcatfamper=e.target.checked;
            if(checkcatfamper)
            { 
                setCatfamperso(1); 
            }  
           else
           {
              setCatfamperso(0);
           }
        }

        const handlecheckChangeCatdetfamperso=(e)=>{
            const checkcatdetfamper=e.target.checked;
            if(checkcatdetfamper)
            { 
                setCatdetfamperso(1); 
            }  
           else
           {
               setCatdetfamperso(0);
           }
        }

        const handlecheckChangeCatgen=(e)=>{
            const checkcatgen=e.target.checked;
            if(checkcatgen)
            { 
                setCatgen(1); 
            }  
           else
           {
               setCatgen(0);
           }
        }

        const handlecheckthistrialmed=(e)=>{
            const checkhistmed=e.target.checked;
            if(checkhistmed)
            { 
                sethistrialmed(1); 
            }  
           else
           {
              sethistrialmed(0);
           }
        }

        const handlecheckCatmun=(e)=>{
            const checkcatmun=e.target.checked;
            if(checkcatmun)
            { 
                setCatmun(1); 
            }  
           else
           {
               setCatmun(0);
           }
        }

        const handlecheckCatocup=(e)=>{
            const checkcatocup=e.target.checked;
            if(checkcatocup)
            { 
                setCatocup(1); 
            }  
           else
           {
               setCatocup(0);
           }
        }


        const handlecheckCatpacient=(e)=>{
            const checkcatpac=e.target.checked;
            if(checkcatpac)
            { 
                setCatpacient(1); 
            }  
           else
           {
               setCatpacient(0);
           }
        }
        
        const handlecheckCatpartescuerp=(e)=>{
            const checkcatpartcuerp=e.target.checked;
            if(checkcatpartcuerp)
            { 
                setCatpartescuerp(1); 
            }  
           else
           {
               setCatpartescuerp(0);
           }
        }



        const handlecheckCatpersonal=(e)=>{
            const checkcatpersonal=e.target.checked;
            if(checkcatpersonal)
            { 
                setCatpersonal(1); 
            }  
           else
           {
               setCatpersonal(0);
           }
        }

        const handlecheckCatprocquir=(e)=>{
            const checkcatprocquir=e.target.checked;
            if(checkcatprocquir)
            { 
                setCatprocquir(1); 
            }  
           else
           {
              setCatprocquir(0);
           }
        }

        const handlecheckCatsuc=(e)=>{
            const checkcatsuc=e.target.checked;
            if(checkcatsuc)
            { 
                setCatsuc(1); 
            }  
           else
           {
               setCatsuc(0);
           }
        }

        const handlecheckCattipofam=(e)=>{
            const checkcattipfam=e.target.checked;
            if(checkcattipfam)
            { 
                setCattipofam(1); 
            }  
           else
           {
               setCattipofam(0);
           }
        }
       
     

      const enviarDatos=(e)=>{
          e.preventDefault(); 

          const datosusuarios={
               Iduser:id,
               nickname:txtnickname,  
               Cat_usuarios:checkcatuser,
               Cat_enfermedades:checkcatenfer,  
               Cat_entidad_fed:checkcatentfed,  
               Cat_especialidades:checkcatespe,                             
               Cat_estatus:checkcatestatus, 
               Cat_familiar_paciente:checkcatfampac,    
               Cat_detalle_familiar_paciente:checkcatdetfampac, 
               Cat_familiar_personal:checkcatfamper,    
               Cat_detalle_familiar_personal:checkcatdetfamper, 
               Cat_genero:checkcatgen,  
               Historial_medico:checkhistmed,   
               Cat_municipio:checkcatmun,   
               Cat_ocupacion:checkcatocup,  
               Cat_paciente:checkcatpac,    
               Cat_partes_cuerpo:checkcatpartcuerp, 
               Cat_personal:checkcatpersonal,   
               Cat_procedimiento_quir:checkcatprocquir, 
               Cat_Sucursal:checkcatsuc,    
               Cat_tipo_familiares:checkcattipfam,               
               Id_usuario:sessionStorage.getItem("Iduser")}; 
 
               console.log(datosusuarios);

      }

        return ( 
             <div className="card">
                <div className="card-header">
                    Editar Usuario
                </div>
                <div className="card-body">
                    <form   id="webFrmEditarPersonal" onSubmit={enviarDatos}>   
                                <div className="form-group">
                                     <label htmlFor="">ID:</label>
                                     <input type="text"  value={id || ''}  name="txtidpersonal" id="txtidpersonal" className="form-control" aria-describedby="helpId" size={50}  placeholder="Teclea nombre del personal" required readOnly></input>
                                </div>

                                <div className="form-group">
                                     <label htmlFor="">Nombre completo con especialidad:</label>
                                     <input type="text" onChange={e=>nomcompchange(e.target.value)} value={txtnomcomp || ''}  name="txtnomcomp" id="txtnomcomp" className="form-control" aria-describedby="helpId" size={50}  placeholder="Teclea nickname del usuario" readOnly></input>
                                </div>


                                <div className="form-group">
                                     <label htmlFor="">Nickname:</label>
                                     <input type="text" onChange={e=>nicknamechange(e.target.value)} value={txtnickname || ''}  name="txtnickname" id="txtnickname" className="form-control" aria-describedby="helpId" size={50}  placeholder="Teclea nickname del usuario" required ></input>
                                </div>

                                <div className="form-group">
                                     <label htmlFor="">Clave:</label>
                                     <input type="password" onChange={e=>clavechange(e.target.value)} value={txtclave || ''}  name="txtclave" id="txtclave" className="form-control" aria-describedby="helpId" size={50}  placeholder="Teclea clave del usuario" required ></input>
                                </div> 
                                <br></br><br></br>
                                <div className="form-group">
                                    <label>                                           
                                           - Derechos de acceso de la cuenta -
                                    </label>
                                </div> 
                                <br></br>
                                <div className="form-group">
                                    <label>
                                           <input type="checkbox" value={checkcatuser || ''} onClick={(e)=>{handlecheckChangecatuser(e);}} name="checkcatuser" id="checkcatuser" />
                                            Catálogo de usuarios
                                    </label>
                                </div> 
                                <div className="form-group">
                                    <label>
                                           <input type="checkbox" value={checkcatenfer || ''} onClick={(e)=>{handlecheckChangecatenfer(e);}} name="checkcatenfer" id="checkcatenfer" />
                                            Catálogo de enfermedades
                                    </label>
                                </div> 
                                <div className="form-group">
                                    <label>
                                     <input type="checkbox" value={checkcatentfed || ''} onClick={(e)=>{handlecheckChangecatentfed(e);}} name="checkcatentfed" id="checkcatentfed" />
                                            Catálogo de entidadades federativas
                                    </label>
                                </div> 
                                <div className="form-group">
                                    <label>
                                       <input type="checkbox" value={checkcatespe || ''} onClick={(e)=>{handlecheckChangeCatespecia(e);}} name="checkcatespe" id="checkcatespe" />
                                            Catálogo de especialidades
                                    </label>
                                </div> 
                                <div className="form-group">
                                    <label>
                                         <input type="checkbox" value={checkcatestatus || ''} onClick={(e)=>{handlecheckChangeCatesta(e);}} name="checkcatestatus" id="checkcatestatus" />
                                            Catálogo de estatus
                                    </label>
                                </div> 
                                <div className="form-group">
                                    <label>
                                          <input type="checkbox" value={checkcatfampac || ''} onClick={(e)=>{handlecheckChangeCatfampacient(e);}} name="checkcatfampac" id="checkcatfampac" />  
                                            Catálogo de familiar de paciente
                                    </label>
                                </div> 
                                 <div className="form-group">
                                    <label>
                                          <input type="checkbox" value={checkcatdetfampac || ''} onClick={(e)=>{handlecheckChangeCatdetfampac(e);}} name="checkcatdetfampac" id="checkcatdetfampac" />  
                                            Catálogo de detalle familiar paciente
                                    </label>
                                </div> 
                                 <div className="form-group">
                                    <label>
                                          <input type="checkbox" value={checkcatfamper || ''} onClick={(e)=>{handlecheckChangeCatfamperso(e);}} name="checkcatfamper" id="checkcatfamper" />  
                                            Catálogo de familiar del personal
                                    </label>
                                </div> 
                                <div className="form-group">
                                    <label>
                                          <input type="checkbox" value={checkcatdetfamper || ''} onClick={(e)=>{handlecheckChangeCatdetfamperso(e);}} name="checkcatdetfamper" id="checkcatdetfamper" />  
                                            Catálogo de detalle familiar personal
                                    </label>
                                </div> 
                                <div className="form-group">
                                    <label>
                                         <input type="checkbox" value={checkcatgen || ''} onClick={(e)=>{handlecheckChangeCatgen(e);}} name="checkcatgen" id="checkcatgen" />  
                                            Catálogo de género
                                    </label>
                                </div> 
                                <div className="form-group">
                                    <label>
                                         <input type="checkbox" value={checkhistmed || ''} onClick={(e)=>{handlecheckthistrialmed(e);}} name="checkhistmed" id="checkhistmed" />  
                                           Historial médico
                                    </label>
                                </div> 
                                <div className="form-group">
                                    <label>
                                          <input type="checkbox" value={checkcatmun || ''} onClick={(e)=>{handlecheckCatmun(e);}} name="checkcatmun" id="checkcatmun" />  
                                            Catálogo de municipio
                                    </label>
                                </div> 
                                <div className="form-group">
                                    <label>
                                          <input type="checkbox" value={checkcatocup || ''} onClick={(e)=>{handlecheckCatocup(e);}} name="checkcatocup" id="checkcatocup" />  
                                            Catálogo de ocupación
                                    </label>
                                </div> 
                                <div className="form-group">
                                    <label>
                                         <input type="checkbox" value={checkcatpac || ''}onClick={(e)=>{handlecheckCatpacient(e);}} name="checkcatpac" id="checkcatpac" />  
                                            Catálogo de paciente
                                    </label>
                                </div> 
                                <div className="form-group">
                                    <label>
                                          <input type="checkbox" value={checkcatpartcuerp || ''} onClick={(e)=>{handlecheckCatpartescuerp(e);}} name="checkcatpartcuerp" id="checkcatpartcuerp" />  
                                            Catálogo de partes cuerpo
                                    </label>
                                </div> 
                                <div className="form-group">
                                    <label>
                                          <input type="checkbox" value={checkcatpersonal || ''} onClick={(e)=>{handlecheckCatpersonal(e);}} name="checkcatpersonal" id="checkcatpersonal" />  
                                            Catálogo de personal
                                    </label>
                                </div> 
                                <div className="form-group">
                                    <label>
                                           <input type="checkbox" value={checkcatprocquir || ''} onClick={(e)=>{handlecheckCatprocquir(e);}} name="checkcatprocquir" id="checkcatprocquir" />  
                                            Catálogo de procedimiento quirúrgico
                                    </label>
                                </div> 
                                <div className="form-group">
                                    <label>
                                          <input type="checkbox" value={checkcatsuc || ''} onClick={(e)=>{handlecheckCatsuc(e);}} name="checkcatsuc" id="checkcatsuc" />  
                                            Catálogo de Sucursal
                                    </label>
                                </div> 
                                <div className="form-group">
                                    <label>
                                           <input type="checkbox" value={checkcattipfam || ''} onClick={(e)=>{handlecheckCattipofam(e);}} name="checkcattipfam" id="checkcattipfam" />  
                                            Catálogo de tipo familiares
                                    </label>
                                </div>  
                                <br></br> 

                               

                                <div className="input-group">
                                    <span className="input-group-btn">                                        
                                        <button className="btn btn-success" type="submit" aria-label="">Guardar</button>
                                        &nbsp;
                                        <Link to={"/listarusuarios"} className="btn btn-danger" type="button" aria-label="">Cancelar</Link>
                                        &nbsp;
                                        <Link to={"/listarusuarios"} className="btn btn-warning" type="button" aria-label="" id="btnsalir" >Regresar al Listado</Link>
                                   </span>                                    
                                 </div>                              
                    </form>                             
                </div>                
             </div>
         );
    }
 
export default Editarusuarios;

He intentado verificar / conidiocnar un IF (cuando carga la información, pero, me marca errores porque francamente no sé como hacerlo bien), estoy seguro que esto puede ser muy sencillo, pero mi falta de conocimientos "no me deja ver la solución".

Gracias y saludos.

1 respuesta 1

0

En un input checkbox a diferencia de un input text, la propiedad value sirve para asignarle un valor unico a cada opcion. La propiedad que se utiliza para marcar y desmarcar es checked.

const [catGen, setCatGen] = useState(false)

<input type="checkbox" checked={catGen} onChange={() => setCatGen(!catGen)} name="catGen" id="catGen" />

Cuando responda la api y se modifique el valor de catGen a true se verá reflejado en el input.

Espero mi respuesta esté respondiendo correctamente a tu problema

5
  • Hola y buena tarde Rodrigo. Deja lo pruebo y comento.
    – Saulo
    Commented el 5 abr. 2023 a las 0:12
  • Bien. Lo cambié como lo pones, y si. Si marca la casilla al cargar, pero, no desmarca las que no están marcadas, es decir, no respeta lo que viene de la API al cargar el formulario. Ya tengo que subir algunos cambios. La pregunta que me queda para intentarlo mañana es: ¿Funcionaría con el evento en el checkbox de "onLoad" y poner ¿lo que está dentro de "onChange" ahí?. Saludos.
    – Saulo
    Commented el 5 abr. 2023 a las 0:53
  • En teoria el codigo que te envié deberia funcionar correctamente en cualquier caso, ya que checked está ligado a catGen. Una de las cosas que podría estar fallando es que el valor que entrega la API que dices tu que es "0" o "1" sea un string. En Js cuando se evalua una condicion 0 es falso, pero "0" es verdadero. Puede ser ese el problema, que 0 es un string y eso explicaria porque los checkbox están tildados Commented el 5 abr. 2023 a las 1:48
  • Bueno... Creo, que tengo que recorrer el $result en la API y cambiar esos 0 y 1 en true y false. Aun que, yo recuerdo en HTML puro no es así, entiendo, que esto no es HTML es ReactJs. Otra opción es poner combos con Si (1) y No (0)... Aun que, no se me hace bien, porque el checkbox es más adecuado para esto... En fin, es el problema de no conocer bien esto...
    – Saulo
    Commented el 5 abr. 2023 a las 16:32
  • 1
    Ok. Ya, tuve que hacer los cambios en la API, cambié lo que viene de las misma de "1" a true y "0" a false y funcionó. Obviamente, voy a tener que hacer lo mismo al enviar de regreso a la API. Gracias, Rodrigo por tu ayuda. Saludos.
    – Saulo
    Commented el 5 abr. 2023 a las 18:11

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.