Creé una versión más pequeña de mi proyecto donde quería demostrar mi problema con las casillas de verificación. Básicamente, quiero eliminar la fila de la tabla de la casilla de verificación que se ha marcado.
Mi primer problema surge cuando hago clic en mi casilla de verificación donde no devuelve true sino false en el clic inicial al marcar la casilla usando const checked = e.target.checked . Por lo tanto, utilicé if(!checked) para solucionar este problema. ¿Cómo hago para que la casilla de verificación ingrese true cuando hago clic por primera vez en la casilla sin marcar?
Cuando hago clic en la casilla de verificación, insertará dos ID de la misma ID en la matriz de ID en lugar de uno como este [123,123] ids cómo puedo evitar presionar solo uno?
function App() { let initialState = [ {id: 123, text: "Hello world"}, {id: 234, text: "Afternoon world"}, {id: 345, text: "Evening world"} ]; const [alerts, setAlerts] = useState(initialState); const [list, setList] = useState([]); // let ids = []; const handleRemove = () => { ids.forEach((id) => { setAlerts(alerts.filter((a) => a.id !== id)) }); }; let ids = []; const addToList = (e, id) => { const checked = e.target.checked; if (!checked) { ids.push(id); console.log(ids); } }; return ( <div> <RuxTableBody> {alerts.map((alert) => { const { id, text } = alert; return ( <RuxTableRow key={id}> <RuxCheckbox onClick={(e) => addToList(e, id)}> {text} </RuxCheckbox> </RuxTableRow> ); })} </RuxTableBody> <RuxButton onClick={handleRemove}>Acknowledge</RuxButton> </div> ); }