While working on a Next.JS web app, I have an issue concerning the execution of some code.

The relevant TSX code follows:

"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;

Finally comes my problem. When the button is clicked, both the onClick function and formAction gets executed. And what I want is to perform some house-cleaning work in the onClick after the formAction has done its things. But it seems to be that onClick is executed prior to formAction, which becomes a problem. Is there something I could do to control this order ?

While working on a Next.JS web app, I have an issue concerning the execution of some code.

The relevant TSX code follows:

"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;

Finally comes my problem. When the button is clicked, both the onClick function and formAction gets executed. And what I want is to perform some house-cleaning work in the onClick after the formAction has done its things. But it seems to be that onClick is executed prior to formAction, which becomes a problem. Is there something I could do to control this order ?

• reactjs
• forms
• next.js

Share Improve this question Follow asked Nov 21, 2024 at 3:17 MichelMichel 11.8k2020 gold badges101101 silver badges217217 bronze badges

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 0

You can control the whole process by removing the default behaviour for the form, and then programmatically submitting the form at the very end of the 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>