React.js : comment limiter un input uniquement à des nombres (number) ?
Lorsqu'on crée un formulaire pour son site internet, il est important d'effectuer des contrôles et d'ajouter des mécanismes pour faciliter au maximum la saisie des informations par l'utilisateur. Le langage HTML5 a introduit pour ces raisons de nouveaux types de champ. Par exemple, le type "number" permet de ne saisir que des nombres. Cependant, les caractères "+" et "-" sont logiquement autorisés. Si vous désirez empêcher l'utilisation de ces caractères avec le framework React, vous allez devoir modifier le champ de saisie.
Le framework JavaScript React possède malheureusement un bug avec les inputs de type "number". La vérification des données ne fonctionne pas sur l'évènement "onChange". Pour effectuer ce contrôle, vous devez utiliser un input de type "text". Avec l'attribut HTML5 "pattern", vous pourrez, dans une expression régulière, limiter la saisie du texte aux chiffres uniquement. Ensuite, l'évènement "onInput" permet d'ajouter l'étape dans laquelle l'attribut de votre composant va être modifié. Ensuite, dans votre code de vérification finale du formulaire, comparez la valeur saisie avec celle de l'attribut pour contrôler la bonne saisie du champ.
//Code de vérification finale const financialGoal = (evt.target.validity.valid) ? evt.target.value : this.state.financialGoal;
L'inconvénient de l'approche précédente est que le type "number" n'est pas utilisé, ce qui empêche d'afficher un clavier plus adapté sur smartphone. Une autre solution consiste à utiliser l'évènement "onKeyPress", qui correspond au fait d'appuyer sur une touche de son clavier. Vous pouvez vérifier si le caractère saisi est "+" ou "-". Si c'est le cas, utilisez alors la fonction "preventDefault()" de l'évènement pour arrêter son déroulement. L'évènement est alors stoppé et la lettre n'apparaîtra pas dans le champ.
onKeyPress(event) {
const keyCode = event.keyCode || event.which;
const keyValue = String.fromCharCode(keyCode);
if (/\+|-/.test(keyValue)) {
event.preventDefault();
}
}