检查每个输入并禁用按钮

Question

我有一个按钮，我想在任何输入字段为空时禁用它。

以下无效。如果所有输入字段都是空的，那么 return 是正确的。但如果只填一个输入框，则returns false，这是不正确的。在填写所有字段之前，它应该 return 为真。

<Button
  disabled={Object.values(values).every(x => x === "")}
  onClick={handleSubmit}>
  Submit
</Button>

以下工作正常，但 ESlint 抛出错误。

<Button
  disabled={Object.values(values).every(function () {
    for (let key in values) {
      if (values[key] === "")
        return true;
    }
    return false;
  })}
  onClick={handleSubmit}>
  Submit
</Button>

ESlint 错误：

for..in loops iterate over the entire prototype chain, which is virtually never what you want. Use Object.{keys,values,entries}, and iterate over the resulting array no-restricted-syntax

如何更正 disabled 功能？

values={{ testData1: '', testData2: '', testData3: ''}}

Answer 1

Object.values(values) returns 一个数组，所以你可以用 for..of.

遍历它

下面的代码等同于你的代码（假设 values 是一个平面对象）但是使用 for..of 而不是 for..in，因此在 ESlint 看来应该没问题：

<Button
  disabled={function () {
    for (const val of Object.values(values)) {
        if (val === "")
            return true;
    }
    return false;
    }}
  onClick={handleSubmit}>
  Submit
</Button>

编辑：此代码段应该适用于嵌套对象：

<Button
    disabled={
        function findEmpty(arg) {

            for (i in arg) {
                if (typeof arg[i] === 'object') {
                    return findEmpty(arg[i]);
                }

                if (arg[i] == "") {
                    return true;
                }
            }
            return false
        }
        findEmpty(values);
    }
    onClick={handleSubmit}>
    Submit
</Button>

Answer 2

改变，

disabled={Object.values(values).every(x => x === "")}

收件人：

disabled={Object.values(values).some(x => x === "")}

更改原因：

every方法检查数组中的所有元素是否都通过测试。

So in your case, using every checks if all the value is empty, and as you told that initial state it was working (on load) because on initial render all the value will be empty and hence this test pass (and returns true) but once you have any value it will return false because it has one of the value.

而 Some 另一方面，检查数组中的至少一个元素是否通过测试。

Here we need to use some because it will check whether at least one of the value is empty or not. It will return true till all the values are filled. If all the fields are filled then it will return false.

检查每个输入并禁用按钮

Checking Every Input and Disabling a Button

javascript

reactjs

eslint