Estoy tratando de obtener los valores de los elementos que estoy mapeando aquí:
{userInfo.children && userInfo.children.map((child, key) => { const { name, dob, gender } = child; return ( <div key={key}> <h3>{name}</h3> <h3>{dob}</h3> <h3>{gender}</h3> <button onClick={removeChild}>Remove</button> </div> ); })}Esta es mi función:
const removeChild = (e) => { console.log(e.target.parentNode); };Entonces, cuando hago clic en el botón, quiero obtener el nombre, la fecha de nacimiento y el género del que se hace clic.
La única forma en que sé cómo hacerlo es con event.target.parentNode.firstChild , pero sé que no es una buena práctica, ya que si tuviera que agregar otro elemento antes de <h3>{name}</h3> , se desordenaría. Todo arriba.
Tampoco creo que pueda agarrarlo por className o id. Lo probé, pero me da una matriz de todos los datos en lugar del que se hizo clic.
Por favor, avíseme si necesito más detalles o si esto se repite.
Puede pasar el objeto secundario al método de eliminación de elementos secundarios para hacerlo.
<button onClick={(e) => removeChild(e, child)}>Remove</button>Creo que una mejor manera de hacer esto es crear un componente Child separado en lugar de representar solo los elementos html. También debe almacenar la información de userInfo en algún tipo de estado. Uno de los propósitos de React es evitar tener que usar la manipulación directa del DOM y administrar los datos en una tienda en lugar de solo en el DOM y luego manipularlos de esa manera.
En su lugar, cree un componente Child que consta de
<div key={key}> <h3>{name}</h3> <h3>{dob}</h3> <h3>{gender}</h3> <button onClick={removeChild}>Remove</button> </div> Luego, en este componente, puede pasar accesorios, incluso implementar el estado si lo desea, pero no es necesario. Ahora puede pasar todos los datos child al componente, así como removeChild .
{userInfo.children && userInfo.children.map((child, key) => { return ( <Child key={key} child={child} removeChild={removeChild}/> ); })}Niño.js
const Child = ({child, removeChild, key}) =>{ const {name, dob, gender} = child <div key={key}> <h3>{name}</h3> <h3>{dob}</h3> <h3>{gender}</h3> <button onClick={()=>removeChild(key)}>Remove</button> </div> } Y en su componente principal aquí está el removeChild actualizado.
const removeChild = (index) =>{ var dummy = {...userInfo} dummy.children = dummy.children.filter((x, i)=>i!==index) //below is where you use hooks or class state or whatnot //to update userInfo to reflect the new children list }