反应表单验证不适用于密码长度

Question

我有一个登录组件，其中包含两个输入和按钮，该组件根据错误状态和字段禁用和启用。必须填写这两个字段才能启用按钮

对于第一部分，代码工作正常，电子邮件字段按我预期的方式工作。当我输入密码时问题就开始了。根据我在

validateFields

中的条件，我检查密码字段值长度是否小于 8 个字符，如果是，则按钮仍处于禁用状态，否则按钮将被启用。一旦我达到 8 个或更多字符并将字符删除回少于 8 个字符，按钮就会保持启用状态，这不是我期望的行为。什么可能导致这种行为？

登录组件：

import React, { useContext } from "react";
import Button from "@mui/material/Button";
import { Link } from "react-router-dom";
import Container from "@mui/material/Container";
import TextFieldComponent from "./textField/textField.component";
import InputComponent from "./input/input.component";
import AuthContext from "../../context/auth.context";


const Login = () => {
  // styles Objects for Ui
  const containerStyles = {
    display: "flex",
    justifyContent: "space-between",
    padding: "0px",
  };

  const { toggleButtonDisabled, validation, setFormData,formData } = useContext(AuthContext);
  
   const checkSubmitButton = () => {
  
    if (formData.emailIsValid  && formData.passwordIsValid ) {
      toggleButtonDisabled(false);
    } else {
      toggleButtonDisabled(true);
    }
  };

  const changeHandler = (event) => {
    const { name, value } = event.target;
    setFormData(name, value)
    validation(name, value);
    checkSubmitButton();
  };


  return (
    <>
      <form action="">
        <TextFieldComponent
          name="email"
          label="Email"
          error={formData.fieldType === 'email' ? formData.error : ''}
          changeHandler={changeHandler}
        />

        <InputComponent
          name="password"
          label="Password"
          error={formData.fieldType === 'password' ? formData.error : ''}
          changeHandler={changeHandler}
        />
        <Container style={containerStyles} maxWidth="100%">
          <Link style={{ marginTop: "3px" }} component="button">
            Forgot Password ?
          </Link>
          <Button disabled={formData.submitDisabled} variant="contained">
            Sign In
          </Button>
        </Container>
      </form>

      <Container style={{ textAlign: "center", marginTop: "35px" }}>
        <span style={{ width: "100%", textAlign: "center", padding: "5px" }}>
          Don't have an account?
        </span>
        <Link to={"/signup"}>Sign Up</Link>
      </Container>
    </>
  );
};

export default Login;

辅助功能

export const validateFields = (fieldName, fieldValue,setForm) => {
    if (fieldName === "email") {
      const emailRegex = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}$/;
      const isValid = emailRegex.test(fieldValue);
      if (!isValid && fieldValue !== "") {
        setForm((prevFromData) => {
          return {
            ...prevFromData,
            error: true,
            errorMessage: "Email most be in a valid formant",
            emailIsValid: false,
            fieldType: "email",
          };
        });
      } else {
        setForm((prevFromData) => {
          return {
            ...prevFromData,
            error: false,
            errorMessage: "",
            emailIsValid: true,
            fieldType: "email",
          };
        });
      }
    }

    if (fieldName === "password") {
      console.log(fieldValue.length);
      if (fieldValue.length <7 ) {
        console.log('the value is less than 7');
        setForm((prevFromData) => {
          return {
            ...prevFromData,
            error: true,
            passwordIsValid: false,
            submitDisabled: true,
            fieldType: "password",
          };
        });
      } else{
        setForm((prevFromData) => {
          return {
            ...prevFromData,
            error: false,
            passwordIsValid: true,
            submitDisabled: false,
            fieldType: "password",
          };
        });
      }
    }
  };

反应上下文

import React, { createContext,  useState } from "react";
import { validateFields } from "../helper/helpers";

export const AuthContext = createContext();

export const AuthProvider = ({ children }) => {

  const [formData, setForm] = useState({
    email: "",
    password: "",
    error: false,
    errorMessage: "",
    emailIsValid: false,
    passwordIsValid: false,
    submitDisabled: true,
    fieldType: "",

  });


  const setFormData = (name, value) => {
    setForm((prevData) => {
      return {
        ...prevData,
        [name]: value,
      };
    });
  }

  const validation = (fieldName, fieldValue)=>{
    validateFields(fieldName, fieldValue,setForm)
  }


  const toggleButtonDisabled = ( disabledStatus) => {

    setForm((prevFormData) => {
      return {
        ...prevFormData,
        submitDisabled: disabledStatus,
      };
    });

  }
  
  return (
    <AuthContext.Provider value={{ formData, setFormData, toggleButtonDisabled, validation }} >
      {children}
    </AuthContext.Provider>
  )



}

export default AuthContext;

Answer 1

我认为问题出在你的

auth.context

文件中：

const validation = (fieldName, fieldValue)=>{
    validateFields(fieldName, fieldValue,setForm)
}

您之前没有在该范围内定义

setForm

，仅定义

setFormData

。所以定义可能是：

const validation = (fieldName, fieldValue)=>{
    validateFields(fieldName, fieldValue, setFormData)
}

我没有测试它，所以请告诉我这是否解决了您的问题。

另外请注意检查

fieldValue.length

的长度。您当前正在检查

fieldValue.length < 7

是否已评论为 DustInComp。如果最小长度为 8，则必须为

fieldValue.length < 8

或

fieldValue.length <= 7

。