1
votes

Comment réinitialiser le champ de saisie de useRef dans React?

J'ai une saisie de texte. Si je clique sur un bouton spécifique de la page, je souhaite réinitialiser la valeur de l'entrée. Voici mon code:

const inputRef = useRef()

const handleClick= () => {
 inputRef.current.value.reset();
 return "hello world"
}

return (
<>
<input type="text" ref={inputRef}/>
<button onClick={()=> handleClick}>delete all</button>
</>
)

Cela ne fonctionne pas. Comment résoudre ce problème?

javascript reactjs

5 commentaires

Vous devriez utiliser l'état pour vos entrées, alors réinitialisez simplement l'état. Avec react, vous devez éviter autant que possible l'accès direct à Dom.

Ok, je viens de réinitialiser la valeur d'entrée avec mon état. Je serais curieux de savoir comment le faire.

Ne jamais muter l'état! Réinitialisez simplement l'état avec quelque chose comme ceci. .setState ({input: ""})

Oui, c'est ce que j'ai fait. valeur d'entrée = {query} /> puis setQuery ("")

Est-ce que cela répond à votre question? Effacer et réinitialiser les champs de saisie du formulaire

4 Réponses :

3
votes

Vous pouvez effacer la valeur dans le champ de saisie comme ci-dessous.

const handleSubmit = e => {
 e.preventDefault();
 e.target.reset();
}

<form onSubmit={handleSubmit}>
  ...
</form>

et modifier l'appel onClick dans le bouton comme ci-dessous

const formRef = useRef();

const handleClick = () => { 
  formRef.current.reset();
}

render() {
  return (
    <form ref={formRef}>
      <input />
      <input />
      ...
      <input />
    </form>
  );
}

Si vous souhaitez une réinitialisation complète d'un formulaire ayant plusieurs entrées, vous pouvez suivre l'approche ci-dessous. Dans l'exemple ci-dessous, le formulaire sera réinitialisé après l'envoi

onClick={handleClick}
//or
onClick={()=> handleClick()}

si vous ne souhaitez pas utiliser Ref

const handleClick= () => {
 inputRef.current.value = "";
 return "hello world"
}

4 commentaires

Si vous voyez le dernier commentaire en question, il voulait juste réinitialiser la valeur du champ de saisie. Pour terminer la réinitialisation du formulaire, l'utilisateur peut utiliser Ref dans l'élément

et le réinitialiser en utilisant f_ref.current.reset ()

J'ai mis à jour l'exemple. Merci pour vos commentaires. :)

oui, mais votre réponse indique réinitialiser la valeur ... cela sera trompeur pour les futurs utilisateurs car vous ne réinitialisez pas réellement - effacez simplement la valeur entrée - ce qui inclurait toute valeur par défaut. Ceci est important lorsqu'il existe une valeur par défaut.

Merci de l'avoir remarqué. Je mets à jour ma réponse

0
votes

Vous avez deux problèmes, l'un vous transmettez une fonction qui appelle une fonction dans votre gestionnaire onClick - ce qui n'est pas nécessaire. Si vous définissez la fonction avant votre rendu, vous n'avez pas besoin de passer une fonction anonyme au gestionnaire onClick.

  const handleClick = e => {
   inputRef.current.value = "";
   return "hello world";
  };

L'autre problème est que votre fonction handleClick appelle reset, qui n'est pas une fonction sur une entrée. Pour réinitialiser la valeur de l'entrée référencée, vous pouvez la définir sur une chaîne vide (ou ce que vous voulez que la valeur "par défaut" soit).

// Before
<button onClick={()=> handleClick}>delete all</button>

// After
<button onClick={handleClick}>delete all</button>

0 commentaires

1
votes

Vous pouvez effacer le champ de saisie de texte en définissant sa valeur sur une chaîne vide. Vous pouvez le faire comme ceci inputref.current.value = "" si vous souhaitez utiliser des entrées non contrôlées.

Cependant, si vous souhaitez utiliser des entrées contrôlées, vous pouvez créer une variable d'état pour suivre les valeur du champ de saisie. Par exemple,

const SomeComponent = () => {
  const [text, setText] = useState('')

  return (
    <>
      <input type="text" value={text} onChange={(e) => setText(e.target.value)} />
      <button onClick={() => setText('')}>delete all</button>
    </>
  );
};

Voici un codesandbox avec les deux implémentations.

0 commentaires

4
votes

reset est disponible sur l'élément form . Vous pouvez envelopper votre saisie avec un formulaire et déclencher une réinitialisation dessus.

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.10.2/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.10.2/umd/react-dom.production.min.js"></script>

<div id="root"></div>

const {useRef} = React;
const App = () => {
  const formRef = useRef();

  const handleClick = () => {
    formRef.current.reset();
    return 'hello world';
  };

  return (
    <form ref={formRef}>
      <input type="text" />
      <button onClick={handleClick} type="button">
        delete all
      </button>
    </form>
  );
};
ReactDOM.render(<App />, document.getElementById('root'));

0 commentaires