My goal after clicking the register button is:

• Make input fields blank
• Do not show error tooltips

Here is the

Here is the link on CodeSandbox

Every help is welcome!

CodePudding user response：

I don't commonly use uncontrolled components, but I think you could solve this by adding setValidated(false) and event.target.reset() to the handleClickTransitionAlert, like this:

  const handleClickTransitionAlert = (event) => {
    setTransitionAlert(true);
    setTimeout(() => {
      setTransitionAlert(false);
      setValidated(false)
      event.target.reset()
    }, 1700);
  };

CodePudding user response：

Try reseting the validated attribute on Bootsrap Form. it should look something like this (this is pseudo-code):

import React, { useRef, useState } from 'react';
const FormComponent = () => {
  const [validated, setValidated] = useState(false);
  const formRef = useRef(null);

  const handleReset = () => {
    formRef.current.reset();
    setValidated(false);
  };

  const handleSubmit = () => {
     // Do stuff here
     // On success or error:
    setValidated(true);
    handleReset();
  }

   return(
      <Form ref={formRef}  validated={validated} onSubmit={handleSubmit}>
        // your form inputs
      </Form>
   );
export default FormComponent;
}