Блог

У меня есть массив объектов, которые я задаю в качестве значений в полях ввода. Однако я тоже хочу иметь возможность изменять эти входные данные. В настоящее время я не могу изменить входные данные при вводе, они застряли на заданном мной значении.

Я хочу сохранить эти значения, но также ввести другое значение. Примечание: Я не хочу, чтобы он был заполнителем

   [
{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> 

Я предлагаю ознакомиться с документацией React о контролируемых компонентах. Вы указываете, чтобы текстовые входные данные всегда имели это значение, и не обновляете состояние, определяющее значение этих входных данных.

https://reactjs.org/docs/forms.html

В общем случае, если эти данные передаются в качестве реквизита для этого компонента, вы должны сохранить эти переданные данные реквизита в состоянии. Затем ваш компонент может обновить состояние, когда пользователь вводит форму, но ваши реквизиты всегда сохраняют свои значения. Это позволит достичь вашей цели-сохранить эти исходные данные в вашем распоряжении.