0
votes

Le crochet de réaction ne peut pas effacer la valeur d'entrée

mon composant ressemble à ce problème

const onkeychange = async (e) => {
    setState({ ...state, textValue: e.target.value })
    if (delay !== false) {
        clearTimeout(delay)
    }
    let string = e.target.value
    if (string.trim() == '') {
        setState({ ...state, issearching: false })
    }
}
<input
    type="text"
    autoComplete="off"
    name="search"
    placeholder="Search for a Product, Brand or Category"
    value={state.textValue}
    className="search"
    onChange={onkeychange}
/>

, quand après je tape quelque chose dans l'entrée. Ensuite, essayez de tout supprimer, je ne peux pas je peux supprimer tous les caractères sauf un dernier. Par exemple: je tape bonjour dans l'entrée. en essayant de le supprimer avec un retour arrière, je peux supprimer ello mais pas le h

reactjs

0 commentaires

3 Réponses :

1
votes

Vous vérifiez si string === '' et la casse true vous définissez l ' état en utilisant l'ancien state qui inclut la valeur de string juste avant de supprimer le dernier caractère, c'est pourquoi vous ne pouvez pas supprimer le dernier. Vous devez supprimer la condition

const onkeychange = async (e) => {
    setState({ ...state, textValue: e.target.value })
    if (delay !== false) 
        clearTimeout(delay)

}

2 commentaires

J'ai besoin de cette condition

Votre condition garantit que textValue ne sera jamais vide. C'est un comportement recherché? Cas non, quel est le comportement attendu?

0
votes

Utilisez la forme fonctionnelle de setState pour obtenir le dernier état lors de sa mise à jour. Je vous recommande également d'envisager d'utiliser le crochet de réduction ici.

  const onkeychange = async e => {
    const value = e.target ? e.target.value : "";
    setState(currentState => ({ ...currentState, textValue: value }));
    if (delay !== false) {
        clearTimeout(delay)
    }

    if (value.trim() === "") {
      setState(currentState => ({ ...currentState, issearching: false }));
    }
  };

0 commentaires

0
votes

Le setState est asynchrone, vous pouvez utiliser un rappel dans le setState pour obtenir le preState correct pour résoudre ce problème.

 const string = e.target.value
 if (delay !== false) {
      clearTimeout(delay);
 }
 const isSearching = string.trim() !== "";
 setState({ ...state, textValue: string, isSearching});

ou un moyen plus simple est pour n'exécuter setState qu'une seule fois.

const string = e.target.value;

setState((prevState) => {
   return { ...prevState, textValue: string }
})

if (delay !== false) {
   clearTimeout(delay)
}

if (string.trim() === '') {
   setState((prevState) => {
     return ({ ...prevState, isSearching: false })
    })
}

view démo sur code sandbox

0 commentaires