我正在處理這個表單，它允許添加多個用戶，并且允許為每個用戶添加多個目標。然而，這些中的每一個都將是一個輸入欄位。到目前為止，我已經為用戶創建了輸入欄位firstName并lastName創建了一個按鈕來添加更多欄位，但是當我嘗試映射目標時，我無法從目標陣列中獲取值。
這是每個部分的代碼
//code for setting state
const [users, setUsers] = useState([ { firstName: '', lastName: '' , goals: [{ mainGoal:'', subTasks:[] }] }])//empty users array set when we start
表單輸入代碼
<label className="boldLabel">Add Member</label>
{users.map((input, index) => { //initially we are mappin through the empty users array and creating one field in the return section
return (
<div className="singleOwnerField" key={index}>
<Row>
<Col>
<input
name='firstName'
placeholder='First Name'
value={input.firstName}
onChange={event =>handleAddMore(index,event)}
/>
</Col>
<Col>
<input
name='lastName'
placeholder='Last Name'
value={input.lastName}
onChange={event =>handleAddMore(index,event)}
/>
</Col>
<Col>
{input.goals.map((goal,i)=>{
return(
<input key={i}
name='mainGoal'
placeholder='Main Goal Name'
value={goal.mainGoal}
onChange={event =>handleAddGoal(index,i,event)}
/>
)
})}
然后我用來將 firstName 和 lastName 添加到用戶物件的函式（這按預期作業）
const handleAddMore = (index,event)=>{
let data=[...users]
data[index][event.target.name]=event.target.value
setUsers(data)
}
下面是為從目標輸入欄位中選擇輸入值而撰寫的函式
const handleAddGoal = (index,goalIndex,event)=>{
let goalsOfUser=[...users[index].goals]
goalsOfUser[goalIndex][event.target.name]=event.target.value
console.log("printing goalsOfUser: " JSON.stringify(goalsOfUser))
console.log("users" JSON.stringify(users))
}
但是，當我在輸入欄位中訪問 goal.mainGoal 時（上面表格中的一個片段），它不會在輸入欄位中顯示值（即不能輸入）
<input key={i}
name='mainGoal'
placeholder='Main Goal Name'
value={goal.mainGoal}
onChange={event
=>handleAddGoal(index,i,event)} />
我在 handleAddGoal() 函式中嘗試了 console.logging，它似乎用我們在目標欄位中鍵入的第一個字母列印用戶物件，但沒有保存
我嘗試添加 setUser(user) 但仍然是相同的行為
const handleAddGoal = (index,goalIndex,event)=>{
let goalsOfUser=[...users[index].goals]
goalsOfUser[goalIndex][event.target.name]=event.target.value
console.log("printing goalsOfUser: " JSON.stringify(goalsOfUser))
console.log("users" JSON.stringify(users))
setUsers(users)
}
uj5u.com熱心網友回復：
在handleAddGoal 函式中，您更改了目標，但沒有在users array.
你需要這樣做
const handleAddGoal = (index,goalIndex,event)=>{
let goalsOfUser=[...users[index].goals]
goalsOfUser[goalIndex][event.target.name]=event.target.value
const tempUsers = [...users]
tempUsers[index].goals = goalsOfUser;
setUsers(tempUsers)
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/522447.html