Ошибка при настройке ввода в ReactJS, метка перезаписывает / перезаписывает значение набора ввода, используя material.ui

Добрый день, разработчики !!

У меня небольшая проблема, я использую responseJS, и я использую react-form-hook, в котором я использую TextField из Material-UI. Когда я заполняю ввод именем cep, он вызывает функцию, которая отправляет содержимое из this в api, который возвращает содержимое для заполнения ввода там. Проблема возникает, когда я пытаюсь установить свои вводы с возвращенным содержимым. Метка ввода остается в поле, как в случае, показанном на фотографии, в последнем поле ввода. Вот и пришел ответ.

поля сначала с setValues ​​хука реакции-формы, но ошибка не исчезла после того, как я попытался установить этот способ document.querySelector ('# inputStreet'). значение = улица;

Наконец, я решил создать в этих входах, которые будут получать обновление useState для каждого

const [srua, setSrua] = useState ('');
const [sbairros, setSbairros] = useState ('');
const [scity, setScidade] = useState ('');
const [sUF, setSUF] = useState ('');

Только таким образом он смог решить проблему отсутствия метки на содержимом ввода, как уже было показано на фотографии в последнем вводе. Я считаю, что это не самый правильный способ, поэтому мне нужна помощь. о том, как решить эту проблему более эффективно. Просто так

Ссылка на репозиторий.

введите описание изображения здесь


reactjs javascript material-ui react-hooks react-hook-form
person Joezer    schedule 19.09.2020    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Проблема с вашим TextField в том, что InputLabel не сжимается. метка сжимается, когда TextField находится в фокусе или когда значение TextField не пусто.

Но поскольку вы устанавливаете значение программно, ввод не фокусируется, значение также не регистрируется, потому что оно неконтролируемое, что означает, что TextField отслеживает и обновляет value внутри для вас и игнорирует внешний value, если он предоставлен. .

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

Вы также можете упростить этот процесс, используя Controller react-hook-form. Это компонент-оболочка, который помогает передавать общие свойства управляемым компонентам.

<Controller
  render={({ onChange, onBlur, value, name }) => (
    <TextField
      onBlur={onBlur}
      onChange={(e) => onChange(e.target.value)}
      value={value}
      name={name}
      label="Email"
    />
  )}
  name="email"
  control={control}
  // need to initialize value to register the TextField as controlled
  // if we don't provide, the default value is undefined, which means uncontrolled
  defaultValue=""
/>

Что можно сократить до этого

<Controller
  render={(props) => <TextField {...props} label="Email" />}
  name="email"
  control={control}
  defaultValue=""
/>

Живая демонстрация

Отредактируйте 63973773 / error-when-setting-an-input- in-reactjs-label-is-over-overwrites-the-value-of

person NearHuscarl    schedule 20.09.2020