停止验证React Bootstrap窗体中React窗体组件中的一个字段

npm install react-bootstrap bootstrap react-hook-form

import React from 'react';
import { useForm } from 'react-hook-form';
import { Form, Button } from 'react-bootstrap';
import 'bootstrap/dist/css/bootstrap.min.css';

const MyForm = () => {
  const { register, handleSubmit, formState: { errors }, clearErrors } = useForm();
  const [shouldValidate, setShouldValidate] = React.useState(true);

  const onSubmit = (data) => {
    console.log(data);
  };

  const handleCheckboxChange = (event) => {
    setShouldValidate(event.target.checked);
    if (!event.target.checked) {
      clearErrors('email');
    }
  };

  return (
    <Form onSubmit={handleSubmit(onSubmit)}>
      <Form.Group controlId="formName">
        <Form.Label>Name</Form.Label>
        <Form.Control
          type="text"
          placeholder="Enter your name"
          {...register('name', { required: 'Name is required' })}
          isInvalid={!!errors.name}
        />
        <Form.Control.Feedback type="invalid">
          {errors.name && errors.name.message}
        </Form.Control.Feedback>
      </Form.Group>

      <Form.Group controlId="formEmail">
        <Form.Label>Email</Form.Label>
        <Form.Control
          type="email"
          placeholder="Enter your email"
          {...register('email', shouldValidate ? { required: 'Email is required' } : {})}
          isInvalid={!!errors.email}
        />
        <Form.Control.Feedback type="invalid">
          {errors.email && errors.email.message}
        </Form.Control.Feedback>
      </Form.Group>

      <Form.Group controlId="formCheckbox">
        <Form.Check
          type="checkbox"
          label="Validate Email"
          checked={shouldValidate}
          onChange={handleCheckboxChange}
        />
      </Form.Group>

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

export default MyForm;