0

Estoy tratando de obtener el estado del checkbox al que hice click con react sin embargo cuando hago click sobre cualquier checkbox todos se seleccionan y obtengo true, o se deseleccionan y obtengo false, como puedo obtener solo el valor del checkbox al que hice click, hay alguna manera de usar this o algo así?

Gracias por la ayuda.

const asistentes = [{name: "Maria"},{name: "Julian"},{name: "Laura"}];
    
    const Asistentes = (props) => {
      const [actualState, changeCheckState] = useState(false);
      const handleChexbox = (e) => {
        changeCheckState(e.target.checked);
      }
      console.log(actualState);
    
      return props.asistentes.map((item)=>{
        return (
          <div>
            <p>{item.name}</p>
            <input onChange={handleChexbox} checked={actualState} type="checkbox"/>
          </div>
        ); 
      });
    }
1
  • Podrías partir por darle un id a cada checkbox y al momento de clickear enviar el indice del elemento clickeado el 8 feb. 2021 a las 20:21

2 respuestas 2

0

Estas controlando el estado de los 3 checkbox, con una sola prop de modo que cuando clickas se cambia para los 3.

Podrías hacer que los asisetntes sean un useState para poderlo modificar y añadirle la propiedad de si esta checked o no:

const [asistentes, setAsistentes] = useState([{name: "Maria", checked:false},{name: "Julian", checked:false},{name: "Laura", checked:false}])

Modificar el input así:

<input onChange={() => handleChexbox(item)} checked={item.checked} type="checkbox"/>

Y luego ya gestionar el cambio del campo dentro de asistentes, algo así:

const handleChexbox = (item) => {
    let asistentesActualizados = [...asistentes];
    let index = asistentesActualizados.findIndex(x => x.name === item.name);
    if (index !== -1) {
        asistentesActualizados[index].checked = !asistentesActualizados[index].checked;
        setAsistentes(asistentesActualizados);
    }
}

Deberias haber un campo mejor que el nombre para identificar el asistente, en este caso si hubiera dos con el mismo nombre, fallaría.

0

Creo que el mayor problema que tienes en tu código es que no estás aprovechando la potencia de React. Lo ideal que tu <input> fuera un componente reutilizable con su estado propio. De esta forma no tendrías que gestionar el estado de todos los checkboxes en tu componente padre sino que cada uno lo gestionaría de forma individual. En caso de querer informar al componente padre de que el check ha cambiado le podrías pasar como prop una función que gestione ese cambio.

En tu caso sería algo así:

App.jsx

import React from "react";
import "./style.css";

import { Asistentes } from "./Asistentes";

    export default function App() {
      return (
        <div>
          <Asistentes
            asistentes={[{ name: "Maria" }, { name: "Julian" }, { name: "Laura" }]}
          />
        </div>
      );
    }

Asistentes.jsx

import React from "react";

import { Checkbox } from "./Checkbox";

export const Asistentes = props => {
  const handleCheckboxChange = (id, checked) => {
    console.log(`Soy el checkbox ${id} y mi estado de check es ${checked}`);
  };
  return props.asistentes.map(item => {
    return (
      <div>
        <p>{item.name}</p>
        <Checkbox
          id={`${item.name}_checkbox`}
          onChange={handleCheckboxChange}
        />
      </div>
    );
  });
};

Checkbox.jsx

import React, { useState } from "react";
export const Checkbox = ({ id, onChange = () => {} }) => {
  const [actualState, changeCheckState] = useState(false);
  const handleCheckbox = e => {
    changeCheckState(e.target.checked);
    //Si además de cambiar el estado quieres "avisar" al componente padre puedes ejecutar una función pasada por los props
    if (onChange) {
      onChange(id, e.target.checked);
    }
  };
  return (
    <input
      checked={actualState}
      id={id}
      onChange={handleCheckbox}
      type="checkbox"
    />
  );
};

Aquí te dejo el ejemplo completo. Como ves, la gestión del estado se simplifica al máximo.

Tu Respuesta

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

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