在提交按钮单击时反应表单未调用提交函数

Question

我有一个直截了当的反应表单，当单击提交按钮时，它调用了句柄提交函数。但是，似乎有两个问题。首先，表单不验证输入，实际上在提交时接受空输入。请提供任何帮助。

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

我认为您可能需要在按钮上添加一个 onclick。试试onClick={()=>{}} 看看是否会触发您的表单提交？