#javascript #reactjs
Вопрос:
У меня есть массив объектов, которые я задаю в качестве значений в полях ввода. Однако я тоже хочу иметь возможность изменять эти входные данные. В настоящее время я не могу изменить входные данные при вводе, они застряли на заданном мной значении.
Я хочу сохранить эти значения, но также ввести другое значение. Примечание: Я не хочу, чтобы он был заполнителем
[
{nutrient: "Energy", per100: "449kcal", per35: "157kcal", id: 6}
{nutrient: "Fat", per100: "24.4g", per35: "8.6g", id: 1}
{nutrient: "Saturated fat", per100: "4.5g", per35: "1.6g", id: 2}
{nutrient: "Monounsaturated fat", per100: "13.6g", per35: "4.8g", id: 3}
]
<div>
<div>
{ Object.keys(state[0]).map((key) => (
<input type="text" value={key} id="name" name="productName" />
))}
</div>
{state.map((item) => (
<div key={item.id}>
{Object.values(item).map((val) => (
<input type="text" value={val} id="name" name="productName" />
))}
</div>
))}
</div>
Ответ №1:
Я предлагаю ознакомиться с документацией React о контролируемых компонентах. Вы указываете, чтобы текстовые входные данные всегда имели это значение, и не обновляете состояние, определяющее значение этих входных данных.
https://reactjs.org/docs/forms.html
В общем случае, если эти данные передаются в качестве реквизита для этого компонента, вы должны сохранить эти переданные данные реквизита в состоянии. Затем ваш компонент может обновить состояние, когда пользователь вводит форму, но ваши реквизиты всегда сохраняют свои значения. Это позволит достичь вашей цели-сохранить эти исходные данные в вашем распоряжении.
Комментарии:
1. дело в том, что отображенное значение передается как значение, поэтому оно не передается через состояние