反应可选字段验证

Question

我有一个带有下一个字段的注册表单：

1. 姓名
2. Email
3. 密码
4. 确认密码
5. 可选字段
6. Select 角色（学生、教授、秘书）

我想要的是：

如果我想创建具有学生角色的用户，则不应考虑可选字段，但如果我想创建教授/秘书用户，则必须在可选字段中输入某个密码（ https://prnt.sc /159y5x9 )

这是我的寄存器 function：

function Register() {
const [user, setUser] = useState(initialState)
const pswdProfesor = "profpassword"  //password needed for professor role
const pswdSecretar = "secretpasswor" // password needed for secretary role

const {name, email, password,cf_password, role, err, success} = user

const handleChangeInput = e => {
    const {name, value} = e.target
    setUser({...user, [name]:value, err: '', success: ''})
}

const handleSubmit = async e => {
    e.preventDefault()
    if(isEmpty(name) || isEmpty(password) || isEmpty(role))
            return setUser({...user, err: "Completati campurile", success: ''})

    if(!isEmail(email))
        return setUser({...user, err: "Email invalid", success: ''})

    if(isLength(password))
        return setUser({...user, err: "Parola trebuie sa fie minim 6 caractere", success: ''})
    
    if(!isMatch(password, cf_password))
        return setUser({...user, err: "Parola nu coincide", success: ''})

    // validation for Optional field here //

    try {
        const res = await axios.post('/user/register', {
            name, email, password, role
        })

        setUser({...user, err: '', success: res.data.msg})
    } catch (err) {
        console.log("hello")

        err.response.data.msg && 
        setUser({...user, err: err.response.data.msg, success: ''})
    }
}

PS：我正在使用 React 和 Material UI TextField

Answer 1

你可以做这样的事情

    // validation for Optional field here //

   if(role === "professor" || role === "secretary "){
    if (isEmpty(optional)) {
      return setUser({ ...user, err: "Optional field is required", success: "" });
    }
  }

或者

// validation for Optional field here //

   if(!isEmpty(role) && role !== "student"){
      if (isEmpty(optional)) {
        return setUser({ ...user, err: "Optional field is required", success: "" });
      }
    }

或者

// validation for Optional field here //

   if(!isEmpty(role) && role !== "student" && isEmpty(optional)){
        return setUser({ ...user, err: "Optional field is required", success: "" });
    }