0
206
VistasReactjs agrega el atributo onClick en un elemento dinámico
Intento crear una tabla dinámicamente a partir de los datos recibidos de una respuesta ajax en una aplicación de reacción. El ciclo se crea a partir de la respuesta de una solicitud ajax dentro del gancho useEffect . El problema es que no puedo hacer que funcione el atributo onClick en una etiqueta de anclaje en una celda de tabla. A continuación se muestra el código.
res.data.users.forEach(function (user) { let row = table.insertRow(rowcnt); let cell1 = row.insertCell(0); let cell2 = row.insertCell(1); let cell3 = row.insertCell(2); cell1.innerHTML = user.u_id; cell2.innerHTML = user.username; cell3.innerHTML = '<a href="javascript:void(0)"><span data-feather="edit"></span></a><a href="javascript:void(0)" onClick={(e) => deleteUser(e, ' + user.id + ')}><span data-feather="trash"></span></a>'; rowcnt++; });Pero en la interfaz se muestra
Por favor ayuda.
2 Respuestas
Responde la pregunta0
La "manera de reaccionar" es usar:
estado para mantener los datos.
mappara iterar sobre los datos de usuario mantenidos en el estado y producir una matriz de HTML para cada usuario. Agregue una identificación a cada elementotr.filteren la funcióndeleteUserpara filtrar los datos de la fila donde losu_idsno coinciden con la identificación de la fila eliminada, y use esa matriz para actualizar el estado en el que el componente se volverá a representar con el estado actualizado.
const { useState } = React; function Example({ data }) { const [ users, setUsers ] = useState(data.users); function deleteUser(id) { // Call Axios with the id to delete that item const filtered = users.filter(user => user.u_id !== id); setUsers(filtered); } function getRows(users) { return users.map(user => { const { u_id, username } = user; return ( <tr key={u_id} id={u_id}> <td>{u_id}</td> <td>{username}</td> <td class="delete"> <a onClick={() => deleteUser(u_id)}>Delete</a> </td> </tr> ) }); } return ( <table> {getRows(users)} </table> ); }; const data = { users: [ {u_id: 1, username: 'Steve'}, {u_id: 2, username: 'Polly'}, {u_id: 3, username: 'Brian'}, {u_id: 4, username: 'Billy Joel'} ] }; ReactDOM.render( <Example data={data} />, document.getElementById("react") ); .delete { background-color: red; cursor:pointer; } <script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.1/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.1/umd/react-dom.production.min.js"></script> <div id="react"></div>0
Creo que deberías usar jsx en lugar de innerHTML , así:
return ( <table> <thead> <tr> <th>u_id</th> <th>usename</th> <th>action</th> </tr> </thead> <tbody> {res.data.users.map(user => ( <tr> <td>{user.u_id}</td> <td>{user.username}</td> <td> <a onClick={(e) => deleteUser(e, ' + user.id + ')}>delete</a> </td> </tr> )} </tbody> </table> )