0
226
Vistasalternar una casilla de verificación a la vez en reaccionar
Tengo un componente de reacción que representa la tabla de interfaz de usuario de material. Esta tabla se completa con datos que se obtienen de una API. En una de las celdas de la tabla, tengo un interruptor Material UI para alternar si un usuario está bloqueado o activo. Sin embargo, cada vez que verifico uno de los interruptores, todos los interruptores se verifican simultáneamente, lo que no es lo que pretendo lograr. Quiero poder verificar cada interruptor individualmente sin que afecte el estado de los otros interruptores. ¿Hay una gran manera de hacer esto? 
A continuación se muestra un fragmento de código de muestra:
const Customers = ({customers}) => { const [checked, setChecked] = useState(false); const handleSwitchChange = (event) => { setChecked(event.target.checked); } return customers.map((customer) => { const {_id, name, email, } = customer; return ( <TableRow hover role="checkbox" tabIndex={-1} key={_id}> <TableCell style={{ minWidth: 150 }}>{name}</TableCell> <TableCell>{email}</TableCell> <TableCell>Activated</TableCell> <TableCell align="center"> <Switch color="error" onChange={handleSwitchChange} checked={checked} /> </TableCell> <TableCell> <CustomIconButton startIcon={<VisibilitySharpIcon />} title="Details" /> <CustomIconButton startIcon={<EditSharpIcon />} title="Edit" /> <CustomIconButton startIcon={<MailSharpIcon />} title="Send" /> <IconButton> <DeleteSharpIcon /> </IconButton> </TableCell> </TableRow> ); }); }3 Respuestas
Responde la pregunta0
Lo que está haciendo es que la variable marcada está relacionada con los componentes funcionales de React, por lo que cuando configura Checked (true), por ejemplo, lo configurará para todas las casillas de verificación.
Cada cliente debe tener un valor marcado. por lo tanto, cuando maneje el interruptor, debe mapear a través de sus clientes para encontrar el deseado (usando la identificación, lo pasará a través de la función handleSwitch). luego, cuando lo encuentre, obtendrá una lista filtrada, luego debe acceder a la primera (filteredList.first). y establezca marcado =! marcado. Solución 2, pasa el índice a la función handleSwitch y configura clientes[índice].marcado al contrario.
0
Está pasando la opción marcada común a todas las filas. Pase parámetros adicionales como isChecked indigual a sus filas y cambie ese parámetro en esa función pasando la clave a eso.
0
Debe crear un componente separado ( SwitchComp ) para aislar la lógica de alternancia como se muestra a continuación.
import { useState } from "react"; const SwitchComp = ({ color = "error" }) => { const [checked, setChecked] = useState(false); const handleSwitchChange = (event) => { setChecked(event.target.checked); }; return ( <Switch color={color} onChange={handleSwitchChange} checked={checked} /> ); }; Use SwitchComp donde usó el componente Switch anteriormente, como se muestra a continuación.
const Customers = ({ customers }) => { return customers.map((customer) => { const { _id, name, email } = customer; return ( <TableRow hover role="checkbox" tabIndex={-1} key={_id}> <TableCell style={{ minWidth: 150 }}>{name}</TableCell> <TableCell>{email}</TableCell> <TableCell>Activated</TableCell> <TableCell align="center"> <SwitchComp color="error" /> </TableCell> <TableCell> <CustomIconButton startIcon={<VisibilitySharpIcon />} title="Details" /> <CustomIconButton startIcon={<EditSharpIcon />} title="Edit" /> <CustomIconButton startIcon={<MailSharpIcon />} title="Send" /> <IconButton> <DeleteSharpIcon /> </IconButton> </TableCell> </TableRow> ); }); };