点击提交按钮时，React 表单不调用提交功能

Question

I have a straight forward react form below which called a handlesubmit function when the submit button is clicked. However, it seems that there are two issues. Firstly, the form doesn't validate inputs, and in fact accepts the empty inputs when submitted. Any help is appreciated please.

import Form from "react-bootstrap/Form"
import Button from "react-bootstrap/Button"
import Col from "react-bootstrap/Col"
import { useState } from "react"


const Register = () => {

    const [validated, setValidated] = useState(false);
    const [firstName, setFirstName] = useState('');
    const [lastName, setLastName] = useState('');

    const handleSubmit = (event) => {
        const form = event.currentTarget;
        console.log("in handlesubmit: " + form.checkValidity())
        if (form.checkValidity() === false) {
          event.preventDefault();
          event.stopPropagation();
        }
    
        setValidated(true);
        console.log("in handlesubmit: " + validated)
      };

    console.log('First Name: ' + firstName);
    console.log('Last Name: ' + lastName);

    return (
        <div>
            <h1>Registration page</h1>
            <Form noValidated validated={validated} onSubmit={handleSubmit} style={{textAlign:'left'}}>
            <Form.Row>
                <Form.Group as={Col} controlId="formGridFirstName">
                <Form.Label>First name</Form.Label>
                <Form.Control type="text" placeholder="Enter first name" value={firstName} onChange={(e) => setFirstName(e.target.value)}/>
                </Form.Group>

                <Form.Group as={Col} controlId="formGridLastName">
                <Form.Label>Last name</Form.Label>
                <Form.Control type="text" placeholder="Enter last name" value={lastName} onChange={(e) => setLastName(e.target.value)}/>
                </Form.Group>
            </Form.Row>

            <Button variant="primary" type="submit">
                Submit
            </Button>
        </Form>
        </div>
    )
}

export default Register

Answer 1

I think you probably need to add an onclick to your button. Try onClick={()=>{}} and see if that's triggers your form onsubmit?