1
votes

Mettre à jour la valeur d'entrée uniquement si elle est égale à la valeur actuelle d'un tableau dans la boucle for

J'ai un tableau

        <input value={inputValue} onChange={(e) => onInputChangeHandler(e)}/>

Et j'ai une entrée

["a","b","c","d"]

Je veux que onInputChangeHandler vérifie si la lettre tapée est égale au premier élément du tableau, et s'il est égal, mettez à jour l'entrée avec la lettre tapée, s'il n'est pas égal, ne faites rien. Ensuite, lorsque l'utilisateur tape une autre lettre, je veux que onInputHanlder vérifie si la lettre est égale au deuxième élément du tableau et ainsi de suite.

reactjs

0 commentaires

3 Réponses :

0
votes

Il semble que vous deviez stocker l'index sur lequel vous vous trouvez dans le tableau.

Vous avez écrit la logique if / else en mots dans votre question, vous devriez donc pouvoir l'écrire facilement dans onInputChangeHandler.

Une fois que vous avez une variable comme letterIndex , vous pouvez la démarrer à 0 et l'incrémenter chaque fois que onInputChangeHandler est appelé.

En supposant que cela existe dans un composant React, cela entrerait dans l'état du composant et les opérations seraient effectuées de la même manière que vous gériez le suivi de tout autre état.

1 commentaires

J'ai trouvé const [letterIndex, setLetterIndex] = useState (0) const onInputChange = (e) => {if (wordControl [letterIndex] == e.target.value) {setInputValue (e.target.value) setLetterIndex ((prev) => prev + 1)}} Une fois la fonction appelée pour la première fois, tout va bien mais la prochaine fois qu'elle se déclenche, e.target.value est déjà "ab" et "ab"! == "b"

0
votes

Tout ce dont vous avez besoin est .startsWith () . Voici la fonction d'implémentation:

const onInputChangeHandler = userInput => {
  let arr = ["a", "b", "c", "d"];
  if (arr.join('').startsWith(userInput)) {
    console.log('update the state');
  }else{
    console.log('func will be returned without state update');
  }
}

onInputChangeHandler('abc');
onInputChangeHandler('abv');

2 commentaires

Ça ne marche pas comme ça. Votre code vérifiera toujours si la lettre saisie par l'utilisateur commence par «a»

Si un utilisateur tape une lettre dans une entrée, userInput recevra la chaîne entière depuis le début et pas seulement la lettre saisie. Ce sera donc un match.

1
votes

Quelque chose comme ça?

const TestComponent = () => {
  const myArr = ["a", "b", "c", "d"];
  const [inputValue, setInputValue] = React.useState("");

  function onInputChangeHandler(e) {
    if (myArr[e.target.value.length - 1] === e.target.value.slice(-1)) {
      setInputValue(e.target.value);
    }
  }
  return (
    <div>
      <input value={inputValue} onChange={(e) => onInputChangeHandler(e)} />
    </div>
   );
};

0 commentaires