根据密码中的数字和字符更新状态反应

Question

我正在尝试创建一些密码验证 UI 用于练习反应。这意味着有效密码的凭据最初显示为红色，当用户创建密码时，他们将通过验证并变为绿色。正常密码条件如：密码包含大写字母、数字、特殊字符。

这是保存我验证的所有密钥的状态：

  const [valid, setValid] = useState({
    uppercase: false,
    specialChar: false,
    number: false
  });

输入状态控制的输入值：

  const [input, setInput] = useState("");

        <input
          type="text"
          className={validated ? "valid" : "not-valid"}
          value={input}
          onChange={(e) => handleChange(e.target.value)}
        />

我的调用验证器函数的 handleChange 函数

  const handleChange = (e) => {
    setInput(e);
    validateNums(e);
  };

到目前为止一切都很好。代码在我的 validateNums 函数期间失败。它可以与 if 语句中的任何一个一起使用，但不能同时与它们一起使用。这里出了什么问题，为什么？

  const validateNums = (param) => {
    for (const num in nums) {
      if (param.includes(num)) {
        setValid({ ...valid, number: true });
      } else if (param.indexOf(num) === -1) {
        setValid({ ...valid, number: false });
      }
    }
  };

同时链接沙箱： https://codesandbox.io/s/frosty-cache-6pmn8?file=/src/App.js:551-807

Answer 1

您的第二个验证函数将简单地用旧的 valid 状态覆盖您的状态，该状态没有考虑您刚刚更改的 valid 状态（您使用 validateNums 更改）。如果您运行在 validateCaps 函数之后使用 validateNums 函数，您会注意到 Number 验证有效，但 Caps 验证不符合预期。

有多种方法可以实现您想要的效果，例如基于承诺的调用；如果您想确保运行一个接一个地验证您的功能。在您的简单输入验证的特定情况下，根本不需要：最简单的是，您获取参数并设置一次有效状态。请参阅 validate 函数。

const validateNums = (param) => nums.some((num) => param.includes(num));
const validateCaps = (param) => caps.some((cap) => param.includes(cap));

const validate = (params) => {
  setValid({
    ...valid,
    number: validateNums(params),
    uppercase: validateCaps(params)
  });
};

const handleChange = (e) => {
  setInput(e);
  validate(e);
};

你看，我也简化了你的 validateNums 和你的 validateCaps。提示：检查是否有其他方法可以检查数字或大写字母。

请在此处找到适合您的沙盒： https://codesandbox.io/s/hopeful-brook-1wfu2?file=/src/App.js

根据密码中的数字和字符更新状态反应

updating state based on numbers and characters in passwords react

state

input

onchange

reactjs