![](/img/trans.png)
[英]In React how to get a property value of an object using another property value?
[英]How to set value of property in another object using for loop?
我在設置對象屬性值時遇到了一個大問題(對我來說它很大)。 我有一個這樣的對象:
const newPlan = {
name: '',
description: '',
number: '',
monday: {
breakfast: '',
secondBreakfast: '',
soup: '',
secondMeal: '',
supper: '',
}
};
鍵的值取決於用戶輸入。 設置前 3 個值很容易,但是我在對象值中遇到對象問題,我必須在這個循環中使用它。
有這樣的 HTML:
<tr>
<td>PONIEDZIAŁEK</td>
<td>
<input list="monday-breakfast" id="monday-1">
<datalist id="monday-breakfast">
</datalist>
</td>
<td>
<input list="monday-second-breakfast" id="monday-2">
<datalist id="monday-second-breakfast">
</datalist>
</td>
<td>
<input list="monday-soup" id="monday-3">
<datalist id="monday-soup">
</datalist>
</td>
<td>
<input list="monday-second-meal" id="monday-4">
<datalist id="monday-second-meal">
</datalist>
</td>
<td><input list="monday-supper" id="monday-5">
<datalist id="monday-supper">
</datalist></td>
</tr>
和我的js:
newPlan.name = planName.value;
newPlan.description = planDescription.value;
newPlan.number = planWeekNumber.value;
for (let i = 0; i < Object.keys(newPlan.monday).length; i++) {
for (let j = 0; j < allDays.length; j++) {
Object.values(newPlan.monday)[i] = 'abc';
break
}
}
'abc' 值只是例如 - 我想根據輸入列表值設置值,該值基於用戶選擇的內容。 所以有<input list="monday-breakfast">
等等,這個輸入中的每個值都應該是正確的鍵值。 最后它應該是這樣的,例如:
const newPlan = {
name: 'some string from input',
description: 'some string from input',
number: 'some string from input',
monday: {
breakfast: 'some string from input list',
secondBreakfast: 'some string from input list',
soup: 'some string from input list',
secondMeal: 'some string from input list',
supper: 'some string from input list',
}
};
您需要使用index
newPlan.monday
的條目,以便您可以將當前key
的值設置為適當元素的值。 在這種情況下,它是monday-index
(monday-1)。
下面是一個例子:
const newPlan = { name: '', description: '', number: '', monday: { breakfast: '', secondBreakfast: '', soup: '', secondMeal: '', supper: '', } }; let index = 1; newPlan.name = document.getElementById('planName').innerHTML; newPlan.description = document.getElementById('planDescription').innerHTML; newPlan.number = document.getElementById('planWeekNumber').innerHTML; for (let [key, value] of Object.entries(newPlan.monday)) { newPlan.monday[key] = document.getElementById(`monday-${index}`).value; index++; } console.log(newPlan);
<tr> <td>PONIEDZIAŁEK</td> <div id="planName">Plan 1</div> <div id="planDescription">Tasty food.</div> <div id="planWeekNumber">1</div> <td> <input list="monday-breakfast" id="monday-1" value="Ham and eggs"> <datalist id="monday-breakfast"></datalist> </td> <td> <input list="monday-second-breakfast" id="monday-2" value="Cereal"> <datalist id="monday-second-breakfast"></datalist> </td> <td> <input list="monday-soup" id="monday-3" value="Meat soup"> <datalist id="monday-soup"></datalist> </td> <td> <input list="monday-second-meal" id="monday-4" value="Hamburger"> <datalist id="monday-second-meal"></datalist> </td> <td> <input list="monday-supper" id="monday-5" value="Toast"> <datalist id="monday-supper"></datalist> </td> </tr>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.