0
176
Views¿Cómo puedo determinar qué casilla de verificación está marcada?
<table> <tbody> <tr> <th>Select</th> <th>User Id</th> <th>Id</th> <th>Is Banned?</th> <th>registration_date</th> </tr> {data.map((item, i) => ( <tr key={i}> <td><input type="checkbox" checked={isChecked} /></td> <td>{item.user_id}</td> <td>{item.user_name}</td> <td className="isbanned">{item.isbanned}</td> <td>{item.registration_date}</td> </tr> ))} </tbody></table> 
este es mi código como se ve en arriba. Mi pregunta es:
¿Cómo puedo detectar que la casilla de verificación user_id 1 está marcada?
¿Cómo debo cambiar mi código? o lo que puedo usar para eso?
·
Juan Pablo Isaza
1 answers
Answer question0
puedes hacer algo como esto
const data = [ { user_id: "some-id", user_name: "Me", isbanned: "no", registration_date: "2000", }, ] function StackOverflow() { const [selectedUserIds, setSelectedUserIds] = useState([]) const addOrRemoveId = (id) => { setSelectedUserIds((state) => { if (state.includes(id)) { // If new id exists in current list then we remove it from state return selectedUserIds.filter((currentId) => currentId !== id) } // Else we add the item id to our state return [...state, id] }) } return ( <table> <tbody> <tr> <th>Select</th> <th>User Id</th> <th>Id</th> <th>Is Banned?</th> <th>registration_date</th> </tr> {data.map(({ user_id, ...item }) => ( <tr key={user_id}> <td> <input checked={selectedUserIds.includes(user_id)} onChange={() => addOrRemoveId(user_id)} type="checkbox" /> </td> <td>{user_id}</td> <td>{item.user_name}</td> <td className="isbanned">{item.isbanned}</td> <td>{item.registration_date}</td> </tr> ))} </tbody> </table> ) }A tener en cuenta: nunca utilice un índice o una combinación de ellos como claves de componentes. Las claves están destinadas a ser únicas, si ya tiene una identificación de usuario, utilícela como esa identificación de clave
·
Juan Pablo Isaza
Report
Answer question