reactjs - 使用反应功能组件比较密码和重复密码输入值的问题

Question

我遇到了一些关于反应功能组件的问题。问题是我有两个输入标签，一个是密码，另一个是密码重复。我有某种“中间件”，每次在我的密码重复输入中发生 onChange 事件时都会触发，因此它会检查给定值是否与密码输入中的值匹配。当我想比较这两个值时，我每次都会得到一个空字符串作为我的密码状态，我想在不将我的组件转换为类组件的情况下修复它。

一些代码片段在这里：

const Register = () => {
  const [userInfo, setUserInfo] = useState({
    username: '',
    email: '',
    password: '',
    rePassword: '',
    successful: false,
    message: '',
  });

  //my middleware that checks if the value matches and some regex
  const checkPassword = (value) => {
    var regex = new RegExp(
      '^(?=.*[0-9])(?=.*[!@#$%^&*])[a-zA-Z0-9!@#$%^&*]{6,16}$'
    );
    let errors = [];
    console.log(`value is ${value}, and password ${userInfo.password}`);
    if (!value || !regex.test(value)) {
      errors.push('Must be 6-16 characters with one special character');
    } else if (value !== userInfo.password) {
      errors.push("Passwords don't match");
    }
    //for testing purposes
    if (errors) {
      return (
        <div className="alert alert-danger" role="alert">
          {errors.forEach((error) => {
            console.log(error);
          })}
        </div>
      );
    }
  };

  function handleChange(e) {
    const { name, value } = e.target;

    setUserInfo({
      ...userInfo,
      [name]: value,
    });

    console.log(userInfo);
  }

  return (
    <>
      <Form>
        <div class="input_field">
          {' '}
          <span className="icon10">
            <i aria-hidden="true" class="fa fa-lock"></i>
          </span>
          <Input
            type="password"
            name="password"
            placeholder="Password"
            value={userInfo.password}
            onChange={handleChange}
            validations={[required]}
          />
        </div>
        <div class="input_field">
          {' '}
          <span className="icon10">
            <i aria-hidden="true" class="fa fa-lock"></i>
          </span>
          <Input
            type="password"
            name="rePassword"
            placeholder="Re-type Password"
            value={userInfo.rePassword}
            onChange={handleChange}
            validations={[required, checkPassword]}
          />
        </div>
      </Form>
    </>
  );
};

我在这里遇到的问题发生在我的checkPassword验证中间件中，它将确认密码输入的给定值与密码值的空字符串进行比较，但如果我在那里设置了值，则密码不应为空。我需要 userInfo.password 值来更改并反映当前值。顺便说一句，我正在使用 react-validation 库，因此您可以看到一些不规则的标签，例如 Form、Input。

你知道我该如何解决这个问题，因为我真的不知道 useState 问题吗？

标签： reactjsvalidationuse-statereact-functional-component