Y a-t-il un moyen d'utiliser un gestionnaire pour l'entrée? Disons que j'ai 10 entrées et, pour le moment, chacune d'entre elles change, leur contenu doit être écrit dans un état, comment puis-je faire cela? Pour ne pas utiliser 10 états
p>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
3 Réponses :
Vous pouvez utiliser l'attribut Nom sur les champs de saisie pour différencier les autres. L'attribut NAME est alors disponible avec e.target.name à l'intérieur de votre OntionDleInput Fonction.
Vous pouvez transmettre l'index lors de l'appel de la méthode OntionDleInput comme suit:
const onHandleInput = (e, index) => {
const tempArr = [...inputValue];
tempArr[index] = e.target.value;
setInputValue(tempArr);
console.log(tempArr);
};
C'est un moyen, si vous donnez une pièce d'identité à vos champs de saisie, il sera un moyen plus propre, vérifiez mon code ci-dessus une fois
@ Warmachine Oui et cela fonctionnerait si vous n'avez qu'une seule instance du composant sur votre page, mais si vous avez plus d'un que vous avez un problème avec vos identifiants car ID devrait être une valeur unique.
Tout comme vous ajouter des chiffres différemment, les identifiants peuvent être différents et, si vous utilisez la même logique dans un composant différent, cela n'a pas d'importance si votre identifiant dans le composant est identique à l'ID dans d'autres composants, les variables que vous créez sont uniquement composant. Portée, sauf si vous REDUX, alors cela peut causer un problème, mais vous pouvez toujours différencier en fonction de votre conteneur.
Voici un exemple de coque Sandbox, je l'ai fait avec seulement deux champs, mais cela fonctionnera également pour de multiples, donnez simplement des identifiants à vos champs