我試圖從我在這里映射的元素中獲取值：
{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>
);
})}
這是我的功能：
const removeChild = (e) => {
console.log(e.target.parentNode); };
這就是它的樣子
因此，當我點擊按鈕時，我想獲取被點擊者的姓名、出生日期和性別。
我知道如何做到這一點的唯一方法是使用，event.target.parentNode.firstChild但我知道這不是一個好習慣，因為如果我要在<h3>{name}</h3>它搞砸一切之前添加另一個元素。
我也不認為我可以通過 className 或 id 來獲取它。我已經嘗試過了，但它給了我所有資料的陣列，而不是點擊的那個。
如果我需要更多詳細資訊或者是否重復，請告訴我。
uj5u.com熱心網友回復：
您可以將子物件傳遞給 remove child 方法來執行此操作。
<button onClick={(e) => removeChild(e, child)}>Remove</button>
uj5u.com熱心網友回復：
我認為更好的方法是制作一個單獨的Child組件，而不是只渲染 html 元素。此外，您應該userInfo以某種形式存盤狀態。React 的目的之一是避免必須使用直接的 DOM 操作并在存盤中管理資料，而不僅僅是在 DOM 中然后以這種方式操作它。
相反，創建一個Child組件，其中包含
<div key={key}>
<h3>{name}</h3>
<h3>{dob}</h3>
<h3>{gender}</h3>
<button onClick={removeChild}>Remove</button>
</div>
然后在這個組件中，你可以傳遞 props，如果你愿意，甚至可以實作 state，但你不必這樣做。您現在可以將所有child資料以及removeChild.
{userInfo.children &&
userInfo.children.map((child, key) => {
return (
<Child key={key} child={child} removeChild={removeChild}/>
);
})}
Child.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>
}
在您的父組件中，這里是更新的removeChild.
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
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/434316.html
標籤：javascript html 反应
下一篇：在特定行下方添加一行