Загрузка элементов DOM при изменении ввода в поле, а не при загрузке страницы

Question

У меня есть форма в приложении React, в которой поля ввода отображаются в одном компоненте, а кнопки «Обновить» / «Отмена» отображаются в одном компоненте.Когда эта страница загружается, поля ввода заполняются данными из БД.Я создаю функцию в компоненте Button, которая отключает кнопку Обновить, если какое-либо из полей ввода пусто.

В функции я устанавливаю поля ввода для переменной по имени класса для хранения NodeList.Моя проблема в том, что, хотя функция вызывается при загрузке страницы, она не обновляет переменную, когда поля ввода заполнены данными БД.Вместо этого переменные устанавливаются после того, как пользователь ввел любое из полей.Кроме того, переменным присваивается предыдущее значение поля, а не его текущее значение.Например, если я введу букву «А» в пустое поле, переменная DOM будет читать текущее значение как пустое.Если я затем введу «S» в это же поле, переменная DOM будет читать значение как «A» вместо «AS».

Ниже приведена функция, которую я сейчас написал:

  disableButtonCheck = () => {
    const dataField1 = $('.InputField__input___i2o8Y');

    if (dataField1.length > 0) {
      // console.log('hitting conditional')
      const dataValueArray = [];
      for (let i = 0; i < dataField1.length; i += 1) {
        if (dataField1[i].defaultValue === '') {
          console.log('new array:', dataValueArray)
          dataValueArray.push(dataField1[i]);
        }

        if (dataValueArray.length === 0) {
          return false;
        }
        return true;
      }
    }

    // return true;
  }

Пожалуйста, дайте мне знать, если у вас есть предложения по этому поводу или вам нужна дополнительная информация.

Answer 1

Мне удалось решить эту проблему несколькими способами.Первым способом было вызвать NodeList с использованием Vanilla JS вместо jQuery, поскольку jQuery добавит дополнительные ключи к NodeList помимо фактических элементов.Затем я изменил условия так, что если NodeList будет пустым ИЛИ, если массив dataValueArray имеет значение, тогда вернем true, в противном случае вернем false.Функция теперь работает как положено.