初始狀態
const [variation, setVariation] = useState([
{
name: "",
value: [""],
},
]);
按鈕點擊功能
const addValueField = (e, index) => {
e.preventDefault();
const field = [...variation];
field[index].value.push("");
setVariation(field);
};
html渲染：
<div>
{variation.map((value, index) => {
return (
<div className="form-control">
<input
key={index}
className="bg-base-200 m-1 shadow appearance-none border rounded text-gray-700 leading-tight focus:outline-none focus:shadow-outline"
type="text"
placeholder="Enter Variation Type"
/>
<div className="form-control">
{variation[index].value.map((value, i) => {
return (
<input
type="text"
key={i}
className="bg-base-200 m-1 shadow appearance-none border rounded text-gray-700 leading-tight focus:outline-none focus:shadow-outline"
placeholder="Enter Value"
/>
);
})}
<button onClick={(e, index) => addValueField(e, index)}>
Add another value
</button>
</div>
</div>
);
})}
</div>
當在按鈕點擊時呼叫 addValueField(e,index) 時，它不會選擇父 map() 的索引，但按鈕在父 map() 范圍內，因此它不會將索引傳遞給函式并產生錯誤。
uj5u.com熱心網友回復：
onClick不給你index。map如果您使用 as，則必須直接從 the 獲取索引
<button onClick={(e) => addValueField(e, index)}>
Add another value
</button>;
你可以將variation狀態設定為
const addValueField = (e, index) => {
e.preventDefault();
setVariation((state) =>
state.map((o, i) => (i === index ? { ...o, value: [...o.value, ""] } : o))
);
};
轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/352584.html
標籤：javascript 数组 反应 字典 下一个.js