0
86
VistasHacer que las entradas de tipo checkbox vengan marcadas por la API y cambien su estado al momento de su interacción
Hola dev espero que estés bien. Me gustaria que los checkboxes sean marcados por la API y cambien su estado al momento de su interaccion, la verdad he probado varias cosas pero no llego a la solucion
-Estado de roles traídos de la API que se deben marcar.
roles: [ { "id": 3, "name": "Firmante" }, { "id": 4, "name": "Trabajador" } ]-Todos los roles también traídos de la API
const[allRoles, setAllRoles] = [ { "id": 2, "name": "Administrador" }, { "id": 3, "name": "Firmante" }, { "id": 4, "name": "Trabajador" }, { "id": 5, "name": "Gestión de Usuarios" }, { "id": 6, "name": "Admin Workflow" }, { "id": 7, "name": "Representante Legal" }, { "id": 8, "name": "Seguimiento de Notificaciones" } ]-"roles" pintados hasta ahora
<dt> <label className="mb-2">Roles</label> {allRoles.map(role =>{ return ( <div> <label className="new-control new-checkbox checkbox-primary"> <input name={role.id} type="checkbox" name="features" class="new-control-input" onChange={onChangeChecked} /> <span class="ml-2 new-control-indicator">{role.name}</span> </label> </div> ) })} </dt> -Imagen de interfaz de usuario 
Muchas gracias por adelantado...
3 Respuestas
Responde la pregunta0
Debe establecer la propiedad checked de la casilla de verificación
También has definido el name dos veces.
<input name={role.id} type="checkbox" class="new-control-input" onChange={onChangeChecked} checked="checked" />0
Necesitas usar "checked" para establecer la condición para cuando la casilla de verificación esté marcada, pero también "value" para asegurarte de que se pase el valor correcto cuando se active el evento onChange. Ejemplo de implementación: https://codesandbox.io/s/focused-dream-yv7kj?file=/src/App.js
0
use useEffect para marcar las casillas de verificación que provienen de la API.
cree una matriz para contener todos los identificadores de los marcados.
en la entrada, use la propiedad marcada para identificar si la identificación existe en la matriz marcada o no.
const [allRoles, setAllRoles] = useState([ { id: 2, name: "Administrador" }, { id: 3, name: "Firmante" }, { id: 4, name: "Trabajador" }, { id: 5, name: "Gestión de Usuarios" }, { id: 6, name: "Admin Workflow" }, { id: 7, name: "Representante Legal" }, { id: 8, name: "Seguimiento de Notificaciones" } ]); const [checkedRoles] = useState([ { id: 3, name: "Firmante" }, { id: 4, name: "Trabajador" } ]); const [acceptedRoles, setAcceptedRoles] = useState([]); useEffect(() => { const rolesIds = checkedRoles.map((r) => r.id.toString()); setAcceptedRoles(rolesIds); }, [checkedRoles]); const onChangeChecked = (e) => { let newCheckedRoles = []; const isExist = checkedRoles.filter( (r) => r.id.toString() === e.target.id ); if(isExist && isExist.length > 0) { newCheckedRoles = checkedRoles.filter( (r) => r.id.toString() !== e.target.id ); }else { newCheckedRoles = [...checkedRoles, { id: e.target.id, name: e.target.name }] } setCheckedRoles(newCheckedRoles); }; return ( <div className="App"> <dt> <label className="mb-2">Roles</label> {allRoles.map(({ name, id }, i) => { return ( <div key={i}> <label className="new-control new-checkbox checkbox-primary"> <input id={id} type="checkbox" name="features" className="new-control-input" onChange={onChangeChecked} checked={acceptedRoles.includes(id.toString())} /> <span className="ml-2 new-control-indicator">{name}</span> </label> </div> ); })} </dt> </div> );
demostración de muestra de trabajo - codesandbox.io/s/stupefied-wozniak-4ye6l