react-hooks - 带有来自 React-Router-Dom 的链接的注册表单的 onSubmit

Question

我想要实现的是，我希望用户只有在遵循正确的准则(例如至少 8 个字符等)时才能提交注册。我设置了一个按钮链接路由器:

//CSS
import "./Register.css"
//LOCAL LIBRARIES
import { VoidFunc, ChangeEventHandlerType, 
FormEventHandlerType } from "./index"
import useSubmit from "../../Hooks/Register/useSubmit";
//EXTERNAL LIBRARIES
import { Link } from "react-router-dom";

const Register = () => {

    {...}

  //Manage Admin
  const [username, password, confirmPassword, handleChange, 
  handleSubmit, placeholder, error, registerUser] = useSubmit()

  return (

      <div className="div-register">

          {...}

        <form className="form-register" 
        onSubmit={handleSubmit as FormEventHandlerType}>

          {...}

              <Link className="link-register" to={registerUser as string}>
                <button className="btn-submit-register">Submit</button>
              </Link>

            {...}

        </form>

      </div>
  );
};

export default Register;

我的尝试是使用 useState Hook 来管理组件的 url 目标，以便在输入字段未正确填写时，链接“to”属性设置为“/register”(让用户保持在它们已经在同一页面上)，当它们在同一页面上时，它被设置为“/admin”，这是主要的登录目的地。

我有另一个 .tsx 文件，我在其中将一些元素重构为一个箭头函数。我删掉的位只是有条件，比如“如果用户没有填写一个字段，将错误文本添加到该输入字段的占位符”:

//LOCAL
import RegisterUser from "../../Components/Register/RegisterUser";
//EXTERNAL
import { useState } from "react";
import {iState, StateType, 
ChangeEventType, FormEventType} from         
"../../Pages/Register/index"

const useSubmit = () =>{

    //Number Check
    let hasNumber = /\d/;  

    //Error
    const [error, setError] = useState<string>("")

    //Is Password valid
    const [registerUser, setRegisterUser] = useState<string>("/register")

    //Placeholder
    const [placeholder, setPlaceholder] = useState<string>("")

    //Manage Admin
    const [state, setState] = useState<StateType>(iState)
    const {username, password, confirmPassword} = state

    const handleChange = (event: ChangeEventType) => {
        //unfinished code
        event.preventDefault()
        const {name, value} = event.target
        setState({...state, [name]: value})
        console.log(state)

    }

    const handleSubmit = (event: FormEventType) => {

        event.preventDefault()

    {...FAILURE CONDITIONS}
    
    //SUCCESS BLOCK
    else {
        setPlaceholder("")
        setError("")
        setRegisterUser("/admin")
    }

    }

  return [username, password, 
  confirmPassword, handleChange, handleSubmit, placeholder, 
  error, registerUser]
}

export default useSubmit;

感谢任何帮助!

Answer 1

看来您真的只是想从提交处理程序导航到 "/admin"。为此，您应该使用命令式导航而不是 Link。 (1) Link 的点击处理程序不会等待 form 元素的 onSubmit 处理程序完成，并且 (2) 它当然可以'等待 registerUser 状态更新。

如果您正在使用 react-router-dom@5 或 useNavigate，请使用 useHistory Hook 访问 history 对象 如果您使用的是 react-router-dom@6，则 Hook 以访问 navigate 函数。

使用提交

导入并使用 useHistory 或 useNavigate Hook ，具体取决于安装的版本，并在提交中调用成功逻辑分支上的处理程序。删除 registerUser 状态。返回对象而不是数组，因此解构赋值不依赖于数组索引。

import { useHistory } from 'react-router-dom';  // RRDv5
import { useNavigate } from 'react-router-dom'; // RRDv6

const useSubmit = () => {
  const history = useHistory();   // RRDv5
  const navigate = useNavigate(); // RRDv6

  // Number Check
  let hasNumber = /\d/;  

  // Error
  const [error, setError] = useState<string>("");

  // Placeholder
  const [placeholder, setPlaceholder] = useState<string>("");

  // Manage Admin
  const [state, setState] = useState<StateType>(iState);
  const {username, password, confirmPassword} = state;

  const handleChange = (event: ChangeEventType) => {
    // unfinished code
    event.preventDefault()
    const { name, value } = event.target;
    setState(state => ({
      ...state,
      [name]: value
    }));
  }

  const handleSubmit = (event: FormEventType) => {
    event.preventDefault()

    {...FAILURE CONDITIONS}
    
    // SUCCESS BLOCK
    else {
      history.replace("/admin");             // RRDv5
      navigate("/admin", { replace: true }); // RRDv6
    }
  }

  return {
    username,
    password, 
    confirmPassword,
    handleChange,
    handleSubmit,
    placeholder, 
    error,
  };
};

注册

删除包裹提交按钮的 Link 组件，这是不必要的。使用 useSubmit Hook 中的对象解构赋值。

const Register = () => {
  ...

  // Manage Admin
  const {
    username,
    password,
    confirmPassword,
    handleChange, 
    handleSubmit,
    placeholder,
    error,
  } = useSubmit();

  return (
    <div className="div-register">   
      ...
      <form
        className="form-register" 
        onSubmit={handleSubmit as FormEventHandlerType}
      >
        ...
        <button className="btn-submit-register">Submit</button>
        ...
      </form>
    </div>
  );
};