Как редактировать значение TextField, при этом значение уже заранее определено - PullRequest
Новая
       87

Как редактировать значение TextField, при этом значение уже заранее определено

2 голосов
/ 05 августа 2020

У меня есть форма с некоторыми данными из страны. По умолчанию данные доступны только для чтения, если пользователь хочет изменить значение, нажмите кнопку редактирования.

Проблема в том, что я не могу изменить значение в TextInput по умолчанию , значение value уже задано заранее. Я пытаюсь отредактировать значение с помощью onChange(), но это не работает.

Все, что я набираю, не отображается в поле ввода.

Вот мой код, я вставил CodeSandBox: https://codesandbox.io/s/polished-water-muq69?file= / src / App. js

Я использую TextField из react-material.

форма

Может ли кто-нибудь помочь мне обновить эти значения? Заранее спасибо.

Ответы [ 4 ]

2 голосов
/ 05 августа 2020

Как утверждали другие, проблема в том, что вам нужно onChange и value, чтобы указывать на одно и то же значение / переменную в состоянии.

В качестве шага дальше я бы очистил все эти переменные в состоянии и используйте только один метод для изменения свойств (если, например, у вас много полей и код становится достаточно длинным) 

  const changeField = (name, value) => {
    let newCountryInfo = [...countryInfo];
    newCountryInfo[0].data.Country[0][name] = value;
    setCountry(newCountryInfo);
  };

и в каждый TextField вы добавляете sth, как показано ниже, в зависимости от поля 

  onChange={event => {
    changeField("name", event.target.value);
  }}

Отметьте этот код и ссылку на ящик

0 голосов
/ 05 августа 2020

Использовать свойство State как значение

const [countryName, setCountryName] = useState (""); 

<TextField
className={classes.field}
disabled={disabledField}
label="Name"

value={countryName}

onChange={event => {
  setCountryName(event.target.value);
}}
variant="outlined"
InputLabelProps={{
  shrink: true
}}
/>

и внутри useState (""), определите начальное значение или предопределенное значение.

0 голосов
/ 05 августа 2020

Проблема здесь: 

value={item.data.Country[0].name}

все, что вы установили в атрибуте value, останется в нем. Поэтому вместо того, чтобы передавать здесь свой ответ API, передайте в него значение состояния и обновите это состояние при изменении входного значения (двухсторонняя привязка данных). Это решит проблему.

Изменения, которые необходимо внести: 

const [countryName, setCountryName] = useState("");

onChange={event => {
  setCountryName(event.target.value);  // This will update the state
}}
value={countryName}  // updated state value is used here
0 голосов
/ 05 августа 2020

Я не эксперт по React, но похоже, что компонент React отменяет все вводимые изменения. вы можете увидеть это на консоли разработчика, просто удалите value = "brazil" и попробуйте что-нибудь ввести, value = "brazil" вернется к тегу input. Я могу предложить заменить значение заполнителем. Таким образом, пользователь все еще будет видеть старое значение и сможет ввести новое.

...