2
votes

La réinitialisation de React-hook-form fonctionne correctement, les champs de saisie ne se vident toujours pas après l'envoi

J'ai essayé d'utiliser le formulaire de fonction "reset" react-hook-form mais après avoir soumis les champs de saisie ne se vident pas. Je ne sais pas pourquoi exactement, je suis sûr qu'il me manque quelque chose mais je ne trouve pas quoi.

Voici mon code:

const Form = () => {
  const [values, setValues] = useState({
    email: "",
    name: "",
    subject: "",
    description: "",
  });

  const { register, handleSubmit, reset, errors } = useForm();


  toastr.options = {"positionClass": "toast-top-right","progressBar": true,}
  const onSubmit = (values, e) => {
    
    const { email, name, subject, description } = values;
    axios.post("http://localhost:8080/sendme", {
      email,
      name,
      subject,
      text: description,
    });
   
    e.target.reset();
    toastr.success('Message was sent successfully!');
   
  };

  const handleChange = (e) => {
    const { name, value } = e.target;
    setValues({
      ...values,
      [name]: value,
    });
    
  };


  return (
    <div>
      <form onSubmit={handleSubmit(onSubmit)} noValidate>
        <div className="inputField">
          <input
            className={`${errors.email & "inputError"}`}
            name="email"
            type="email"
            ref={register({ required: true, pattern: /^\S+@\S+$/i })}
            placeholder="Your email *"
            value={values.email}
            onChange={handleChange}
          />
          
        

* = Required

); };

J'ai importé la réinitialisation et l'ai utilisée avec onClick mais cela ne semble pas fonctionner. Comment dois-je résoudre ce problème?


6 commentaires

Je pense que vous manquez complètement le point de la forme de crochet de réaction, c'est incontrôlé. bonne lecture de cette page: react-hook-form.com/get-started , je pense que vous allez vous retrouver à supprimer pas mal de code.


@Bill Pouvez-vous être plus précis sur ce que je fais de mal ici, s'il vous plaît?


suivez cette vidéo: youtube.com/watch?v=bU_eq8qyjic vous verrez quelle est la partie manquante. vous ne devriez pas avoir besoin d'utiliser useState avec le formulaire hook.


J'ai lu plus comme vous l'avez dit, c'était tellement stupide de ma part, j'ai réussi à le faire fonctionner maintenant et j'ai vu si j'étais foiré, vous pouvez soumettre une réponse si vous voulez, je devrais en savoir plus sur ce que j'utilise la prochaine fois , Merci


pas du tout stupide, nous faisons tous des erreurs similaires en sautant la doc. j'espère que vous pouvez voir que hook from peut rendre votre formulaire beaucoup plus simple :)


@Bill en effet, je l'ai trop compliqué


3 Réponses :


4
votes

Lorsque vous utilisez react-hook-form, vous pouvez probablement ignorer useState:

https://react-hook-form.com/get-started

Voici un exemple rapide sur la page de démarrage:

import React from "react";
import { useForm } from "react-hook-form";

export default function App() {
  const { register, handleSubmit, watch, errors } = useForm();
  const onSubmit = data => console.log(data);

  console.log(watch("example")); // watch input value by passing the name of it

  return (
    {/* "handleSubmit" will validate your inputs before invoking "onSubmit" */}
    <form onSubmit={handleSubmit(onSubmit)}>
    {/* register your input into the hook by invoking the "register" function */}
      <input name="example" defaultValue="test" ref={register} />
      
      {/* include validation with required or other standard HTML validation rules */}
      <input name="exampleRequired" ref={register({ required: true })} />
      {/* errors will return when field validation fails  */}
      {errors.exampleRequired & This field is required}
      
      
    
  );
}


0 commentaires

1
votes

Faites de la logique, chaque fois que vous souhaitez réinitialiser votre entrée. invoquez simplement la méthode de reset

import React from "react"
import { useForm } from "react-hook-form"

export default function App() {
  const { register, handleSubmit, errors, reset } = useForm()
  const onSubmit = data => {
    console.log(data)
    reset()
  }

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <label htmlFor="firstName">First name</label>
      <input
        id="firstName"
        type="text"
        aria-invalid={errors.firstName ? "true" : "false"}
        name="firstName"
        ref={register({ required: true })}
      />

      <input type="submit" />
    </form>
  )
}

vous encourager!


0 commentaires

0
votes

utilisez le code suivant pour réinitialiser les champs de saisie

e.target[0].value = ''; // email
e.target[1].value = '';  //name
e.target[2].value = '';  //subject 
e.target[3].value = '';  //description


0 commentaires