我是 React 新手，所以請多多包涵。目前正在從事一個專案，目前停留在最后一部分。根據專案要求。我要從 api 獲取資料陣列。在頁面上顯示每個物件的資料。并為每個物件提供一個輸入元素，以便能夠添加標簽、顯示標簽和資料。然后可以根據標簽進行搜索。
資料的簡單版本類似于：
[{
id: "1",
name: "aaa",
info: "xxx"
},{
id: "2",
name: "bbb",
info: "yyy"
},{
id: "3",
name: "ccc",
info: "zzz"
}]
我在獲取資料時首先創建了一個新資料陣列，并為標簽鍵添加了空字串。
useEffect(()=>{
axios.get(apiurl)
.then(response=>{
const students = response.data.students;
const newdata = students.map((o)=>({
...o,
tags: []
}))
setNewdata(newdata)
})
},[apiurl])
所以現在 newdata 就像：
{
id: "4",
name: "ddd",
info: "xyz",
tags: []
}
我正在使用 .map() 渲染資料陣列并顯示每個 Object(student) 并顯示包含輸入區域的所有資料以添加標簽。下面是顯示標簽和允許用戶輸入標簽的輸入框的代碼部分：
newdata.map(function(student, index){
return(
...//other code before this
<div className="tagbox">
<div className='tags'>
{student.tags.map(function(tag, index){
return <span key={index}>{tag}</span>
})}
</div>
<input
id={student.id}
type="text"
placeholder='tag'
value={newtag}
onChange={e=> setNewtag(e.target.value)}
onKeyDown={handleKeyDown} />
</div>
)}
所以基本上我正在為輸入鍵運行一個 handlekeydown 函式。所以當用戶完成輸入并點擊回車時。一個新標簽應該顯示在上面，并將它的值添加到 newdata 陣列中，以便我以后可以匹配搜索功能。問題是我無法找出正確的代碼和語法來執行這個邏輯。到目前為止，我能想到的是：
function handleKeyDown(e){
if (e.key === "Enter"){
for (let i = 0; i < newdata.length; i ){
if (newdata[i].id == "1"){
newdata[i].tags.push(newtag);
}
}
setNewtag(''); //this is to empty the input field
}
}
如您所見，我正在嘗試遍歷資料中的每個物件（學生）。當學生證匹配時。我們添加資料。否則我們跳過。我對值進行了硬編碼，使其僅適用于第一個學生。我嘗試了很多方法，但我要么全部添加，要么不添加。
現在我還能夠為 jsx 中的每個輸入欄位添加一個 id，如下所示：
<input id={student.id}/>
現在，每個輸入欄位都有一個唯一的 ID，與上面顯示的資料中的學生 ID 相同。
所以問題是我應該如何更改我的 handlekeydown 函式，以便每次我輸入標簽時它只會添加到具有相同 ID 的資料中。PS：顯示的每個物件（學生）在我的 .map() 渲染中都有自己的輸入元素。
//my goal is to type "!@#" into the input#4, hit enter and have
{
id: "4",
name: "ddd",
info: "xyz",
tags: ["!@#"]
}
uj5u.com熱心網友回復：
您只呈現 1 個輸入。使用與跨度相同的方法為每個學生呈現 1 個輸入
<div className='tags'>
{student.tags.map(function(tag, index){
return <span key={index}>{tag}</span>
})}
</div>
<div>
{student.map(function(stud, idx){
return <input
id={stud.id}
key={idx}
type="text"
placeholder='tag'
value={newtag}
onChange={e=> setNewtag(e.target.value)}
onKeyDown={(e) => handleKeyDown(e, stud.id)} />
})}
<div>
還要記住通過將學生 ID 添加到簽名中來更新您的 handleKeyDown 函式，并在需要時正確使用它
function handleKeyDown(e, studentId){
if (e.key === "Enter"){
for (let i = 0; i < newdata.length; i ){
if (newdata[i].id == studentId){
newdata[i].tags.push(newtag);
}
}
setNewtag(''); //this is to empty the input field
}
}
您會發現還有另一個問題，實際上您的所有輸入都使用相同的 newTag 變數。我會把它留給你:)
轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/469110.html