validation simple est assez facile de créer vous-même avec MOBX. Pour un seul champ comme celui-ci, une méthode simple pour valider la fonction pourrait ressembler à ceci:
Dans le composant nous avons un champ d'erreur qui montre seulement si l'entrée a été soumise (qui pourrait être déclenchée par un bouton poussoir ou quel que soit)
return <div>
<input placeholder="FirstName" type="text"
defaultValue={Contact.FirstName} onChange={(e) => handler(e)} />
{submitted && <span className="error-message">{Contact.FirstNameError}</span>}
</div>;
Dans la classe observable (je le style non-décorateur), nous définissons le champ comme observable, et une classe de message d'erreur comme une valeur calculée.
class Contact {
constructor() {
extendObservable({
submitted: false,
FirstName: observable(),
FirstNameError: computed(() => {
if(this.FirstName.length < 10) {
return 'First name must be at least 10 characters long';
}
// further validation here
return undefined;
})
})
}
}
Vous pouvez facilement ajouter une valeur calculée hasError supplémentaire qui vient vérifie si FirstNameError a une valeur.
Cette méthode s'adapte à quelques entrées. Si vous commencez à en avoir plusieurs, alors vous voudrez regarder dans une abstraction comme une bibliothèque tierce ou quelque chose que vous écrivez vous-même pour gérer vos validations. Vous pouvez écrire une fonction pour générer les propriétés calculées dont vous avez besoin en fonction d'une petite configuration.