Next.JS/React 表单，执行顺序问题

Question

在开发 Next.JS Web 应用程序时，我遇到了有关某些代码执行的问题。

相关 TSX 代码如下：

"use client";
import {useState,ChangeEvent} from 'react';
import {useFormState} from "react-dom";

import {userLogin} from "...";

export interface LoginResponse {
  status: number;
}

const initialState: LoginResponse = {
  status: -1,
};


const Login = () => {
  const [formState, formAction] = useFormState(userLogin, initialState);
  const [inpMail, setInpMail] = useState('')
  const [logMail, setLogMail] = useState('')

    function mailUpdate(evt:ChangeEvent<HTMLInputElement>) {
    setInpMail(evt.target.value)
    } /* End of radioSelect */

  return(
    <div className="flex flex-col min-h-fit bg-slate-300 w-1/2 items-center" >
      .....
      <form className="p-4 flex flex-col w-80 bg-stone-300 items-center"
            action={formAction} method={"post"} >
        <input .... />
        <input .... />
        ....
        <button className="bg-cyan-500 text-xl rounded-lg w-1/3"
                onClick={() => {
                          setLogMail(inpMail)
                          // setInpMail('')
                        }}
                type="submit">Login</button>
      </form>
    </div>
  )
} /* End of Login */

.....

export default Login;

我的问题终于来了。单击按钮时，onClick 函数和 formAction 都会被执行。我想要的是在 formAction 完成其工作后在 onClick 中执行一些清理工作。但似乎onClick是在formAction之前执行的，这成为一个问题。 我可以做些什么来控制这个订单吗？

Answer 1

您可以通过删除表单的默认行为来控制整个过程，然后在 onClick() 的最后以编程方式提交表单

    <form onSubmit={e => e.preventDefault()} 
          ref={ref => this.form = ref}
          className="p-4 flex flex-col w-80 bg-stone-300 items-center"
          action={formAction} method={"post"} >
            <input .... />
            <input .... />
            ....
            <button className="bg-cyan-500 text-xl rounded-lg w-1/3"
                    onClick={() => {
                              setLogMail(inpMail)
                              // setInpMail('')
                              this.form.dispatchEvent(
                               new Event("submit", { cancelable: true, bubbles: true })
                               )
                            }}
                    type="submit">Login</button>
          </form>