I want to make a form for a register page, after entering the form and hitting submit, the react-bootstrap button will call handleSubmit() using onSubmit={}.
I tried multiple ways to write onSubmit={}, you can see some of them in the Form tag. None of them worked. But the third one, console.log(), did get executed twice when submit button is clicked.
I don't where to start debugging this, so I tried way to write onSubmit and the function
Anonymous function in onSubmit={}
Anonymous async function in onSubmit={}
Anonymous function
Anonymous async function
top-level function
top-level async function
onSubmit={e=>console.log(e)}
None of these worked during testing.
here is a simplified sample with the same problem.
import { Form, Button } from "react-bootstrap";
export default function Home() {
const handleSubmit = (event) => {
event.preventDefault()
console.log("test");
};
return (
<>
<Form
noValidate
// onSubmit={e=>handleSubmit(e)}
onSubmit={handleSubmit}
// onSubmit={console.log("hello world")}
>
<Form.Group>
<Form.Label>Username</Form.Label>
<Form.Control
onChange={() => handleCheck}
type="text"
defaultValue={"test"}
required
/>
</Form.Group>
<Button type="submit">
Submit
</Button>
</Form>
</>
);
}
handleSubmit should get a preventDefault():
const handleSubmit = (e) => {
e.preventDefault()
console.log("test")
}
You're also bringing in useState but no where are you showing how you're using it. You could always update state from handleSubmit.
I think I have found the problem.
The reason I use console.log() to check whether the function is executed is because I want to print out some value. I expected it to print out in the terminal, but this is the front end, all console.log() goes to browser console, instead of terminal. So the code onSubmit={handleSubmit} did execute properly.
Play around with the official example : Nextjs Doc: Building forms