狀態變數是 -
const [details, setDetails] = useState({
Name: "",
Number: null,
subject= [{
subject1 : "",
subject2 : ""
}]
})
<input type="text" placeholder="Enter name" value={details.Name} onChange={(e) => setDetails({ ...details, Name: e.target.value })} />
<input type="text" placeholder="Enter number" value={details.Number} onChange={(e) => setDetails({ ...details, Number: e.target.value })} />
我不知道如何分別寫訪問主題
uj5u.com熱心網友回復：
嘗試將“subject =" 改為“subject :”
const [count, setCount] = useState(0);
const [details, setDetails] = useState({
Name: "saqib",
Number: null,
subject: [
{
subject1: "1",
subject2: "2",
},
],
});
試試這個來訪問物件
{details.name}
{details.subject[0].subject1}
uj5u.com熱心網友回復：
這是處理 subjects 陣列中的多個元素的通用方法
{
details.subject.map((obj,index) => {
return Object.entries(obj).map(k => {
return <input type="text" value={k[1]} onChange={(e) => setDetails({ ...details, subject: Object.assign([ ...details.subject], { [index]: {...details.subject[index], [k[0]]: e.target.value }}) })} />
})
})
}
演示
uj5u.com熱心網友回復：
假設在這種情況下您只想更改陣列的第一個物件，它看起來像這樣：
<input
type="text"
placeholder="Enter subject1"
value={details.subject[0].subject1}
onChange={(e) =>
setDetails((curr) => ({
...curr,
subject: [
{ ...curr.subject[0], subject1: e.target.value },
...curr.subject,
],
}))
}
/>
<input
type="text"
placeholder="Enter subject2"
value={details.subject[0].subject2}
onChange={(e) =>
setDetails((curr) => ({
...curr,
subject: [
{ ...curr.subject[0], subject2: e.target.value },
...curr.subject,
],
}))
}
/>
請注意，
curr回呼是使用當前狀態。這比使用details狀態更好，因為它被設定為異步。
轉載請註明出處，本文鏈接：https://www.uj5u.com/net/535331.html
上一篇：對一個整數陣列進行多重比較