Question

我在React应用程序中有一个表单，其中“输入”字段呈现在一个组件中，而“更新/取消”按钮呈现在同级组件中。加载此页面后，输入字段中将填充来自数据库的数据。我正在Button组件中创建一个函数，如果任何Input字段为空，它将禁用Update按钮。

在函数中，我通过输入字段的类名将输入字段设置为变量以存储NodeList。我的问题是，即使在页面加载时调用了该函数，但在用数据库数据填充Input字段时，它也不会更新变量。取而代之的是，一旦用户在任何字段中键入内容，变量就会被设置。此外，变量将设置为字段的先前值，而不是其当前值。例如，如果我在一个空字段中键入字母“ A”，则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

我能够通过几种方法解决此问题。第一种方法是使用Vanilla JS而不是jQuery调用NodeList，因为jQuery会在实际元素之外向NodeList添加其他键。然后，我更改了条件，以便如果NodeList为空或dataValueArray数组具有值，则返回true，否则返回false。功能现在可以按预期运行。

输入时加载的DOM元素在字段中更改，而不是页面加载时更改

1 个答案: