J'ai une entrée de texte dans mon application de réaction que je ne veux pas prendre des entrées supérieures à 100. Par exemple, si la valeur entrée est 105, une alerte est créée et l'événement est terminé, c'est-à-dire la valeur de l'entrée de modification. ne va pas arriver. Maintenant, je n'ai pas pu trouver un moyen de faire cela à l'intérieur onchange code> fonction. Toute aide serait très appréciée. <input onChange={handleChange} name="t"/>
handleChange = e => {
if(e.target.value > 100){
alert("High")
//Here I want to stop event so that changing text in the input doesn't happen
}
}
3 Réponses :
handleChange = e => {
if(e.target.value > 100){
alert("High");
e.target.value = "";
}
else {
// your normal processing
}
}
should work.Explanation:
Your code would simply not be executed in case the if condition is true.
The line e.target.value = "" doesn't actually "not show" the users input (as asked for in comment), but rather overrides it with empty string.Mention:
This solution has nothing to do with React, but rather works in any context.
Je souhaite empêcher l'affichage de l'entrée de l'utilisateur dans l'interface utilisateur de l'entrée lorsque si la condition se produit.
Si je vous comprends correctement, si une condition spécifique n'est pas remplie, vous souhaitez empêcher l'entrée de refléter le texte que l'utilisateur vient d'entrer.
Pour accomplir cela, vous devez contrôler votre Valeur de l'entrée via l'état.
Cela signifie faire quelque chose comme ceci:
Faites-en une entrée contrôlée et définissez la valeur uniquement si une condition est remplie.
p>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.3/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.3/umd/react-dom.production.min.js"></script> <div id="root"></div>
Je pense juste faire
e.preventdefault ()@Windmaomao j'ai essayé
préventiveDefault etstoppropagation , mais aucun n'a travaillé