es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

Manejo de múltiples casillas de verificación en React

16 Jul, 2023 Programación

[ACTUALIZACIÓN] Agregar Codesand: https://codesandbox.io/s/withered-cherry-lf9po?file=/src/component/Assign.jsx

En mi proyecto de clase, quiero tener una interfaz de checkbox como esta:

enter image description here

Cuando hago clic en el checkbox superior (checkbox Asignar), se marcan todos los checkboxes de abajo. De lo contrario, si desmarco el checkbox superior, se desmarcan todos los de abajo.

Mi enfoque es crear un arreglo de estados de checkbox marcados:

const [isChecked, setIsChecked] = useState(
  new Array(4).fill(false)
);

A continuación, manejaré el evento onChange del checkbox superior. Actualizaré todos los elementos de isChecked para que tengan el mismo estado que el checkbox superior.

const assign = () => {
  return (
    <formcontrollabel control=""></formcontrollabel><checkbox onchange="{(event)" ==""> {
      for(var i = 0; i < 4; i++)
        isChecked[i] = event.currentTarget.checked
      setIsChecked(isChecked)
    }
      }/>} 
    label={<span style="{{" fontsize:="" '0.89rem'="" }}="">
      Asignar</span>} />
  )
}

Los estados de los checkboxes de abajo se actualizan según el arreglo isChecked[].

const miniAssign = (index) => {
  return (
    <checkbox {...label}="" checked="{isChecked[index]}/">
  )
}

Esto lleva a un problema. Cuando hago clic en el checkbox superior, ninguno de los de abajo se marca. Por favor, dime qué hay de mal aquí y cómo puedo solucionarlo.

Tags:  ,

Answer

  1. Avatar for davy.ai
    davy.ai

    El problema está en la naturaleza inmutable de los arrays en JavaScript. Cuando actualizas un elemento en el array, en realidad no estás creando un nuevo array con los valores actualizados. En cambio, estás mutando el array original. En el evento onChange del checkbox superior, estás actualizando el array isChecked pero no estás creando un nuevo array con los valores actualizados. Por lo tanto, cuando llamas a setIsChecked, React no detecta ningún cambio en el array isChecked y no vuelve a renderizar el componente.

    Para solucionar esto, necesitas crear un nuevo array con los valores actualizados en lugar de mutar el array original. Puedes usar la función map para crear un nuevo array con los valores actualizados para cada elemento.

    Así es como puedes actualizar el evento onChange del checkbox superior:

    const assign = () => {
  const handleAssignChange = (event) => {
    setIsChecked(isChecked.map(() => event.currentTarget.checked))
  }

  return (
    <formcontrollabel control=""></formcontrollabel><checkbox onchange="{handleAssignChange}"></checkbox>} 
      label={<span style="{{" fontsize:="" '0.89rem'="" }}="">Assign</span>} />
  )
}

    En el código anterior, estamos creando una nueva función handleAssignChange que crea un nuevo array con los valores actualizados usando la función map. Luego, estamos pasando esta función al evento onChange del checkbox superior.

    Al crear un nuevo array con los valores actualizados, React detectará los cambios y volverá a renderizar el componente con los estados de los checkboxes actualizados.

    También puedes ver el código actualizado con un ejemplo funcional en CodeSandbox aquí: https://codesandbox.io/s/withered-cherry-lf9po?file=/src/component/Assign.jsx

Comments are closed.