0
votes

Réagir la validation d'entrée si vide ou numéro

J'ai créé cette méthode qui obtient l'état de l'entrée de la calculatrice et des vérifications si sa vide ou non. J'ai besoin d'aide avec deux choses:

Quel est le moyen le plus propre d'ajouter ici une validation pour vérifier si chaque entrée est également une entrée et des sorties et des sorties "L'entrée doit être un nombre" li>
actuellement, j'ai un message d'erreur qui incendie si toutes les entrées sont présentes ou non, où je veux ce que je veux, c'est pour qu'il valide chaque entrée séparément et déclencher une erreur sous chacune. Comment puis-je le faire mais gardez toujours cette fonction concise? P>
```
     <span style={{color: "red"}}>{this.state.error}</span>
```

javascript reactjs

2 commentaires

Faites-vous une faveur et examinez-vous dans Formik et Yup pour la manutention et la validation de formik ... Jaredpalmer.com/formik

Abd sinon voici un tutoriel pour vous: Lepringetto .com / blog / how-faire-faire-formulaire-validation-in-réact JS

4 Réponses :

2
votes

Vous pouvez le faire:

{(this.state.error !== '')
      ? <span style={{color: "red"}}>{this.state.error}</span>
      : ''
}

0 commentaires

1
votes

Une solution supposant que vous souhaitez qu'une taille unique convient à tous les messages d'erreur uniquement en vérifiant s'il s'agissait d'un nombre ou non de les mettre dans une matrice et de définir une erreur si l'entrée n'est pas un numéro.

const inputs = [ price, downP, loan, interest ]

inputs.map(input => {
  if (!input || isNaN(input)){
    error = "Input must be a number"
    formIsValid = false
  }
}

this.setState({error})

0 commentaires

4
votes

Un moyen simple de gérer plusieurs objets nécessitant une validation consiste à stocker une erreur code> d'erreurs code> dans votre état contenant une propriété pour chaque champ de saisie. Ensuite, vous rendez l'erreur sous l'erreur sous chaque champ de saisie, selon que, il a une erreur ou non. Voici un exemple très basique:

class Calculator extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      price: 0, downP: 0, term: 0, interest: 0,
      errors: { price: '', downP: '', term: '', interest: '' }
    };
  }

  handleValidation = () => {
    const { price, downP, loan, interest } = this.state;
    let errors = { price: '', downP: '', term: '', interest: '' };

    if (!price) {
     errors.price = 'Price is required';
    } else if (isNaN(price)) {
      errors.price = 'Price must be a number';
    }

    if (!downP) {
      errors.downP = 'Down Payment is required';
    }

    // Rest of validation conditions go here...

    this.setState({ errors });
  }

  render() {
    const { errors } = this.state;

    return (
      <form>
        <input name="price" value={this.state.price} onChange={this.handleChange} />
        {errors.price != '' && <span style={{color: "red"}}>{this.state.errors.price}</span>}
        <input name="downP" value={this.state.downP} onChange={this.handleChange} />
        {errors.downP != '' && <span style={{color: "red"}}>{this.state.errors.downP}</span>}

        {/** Rest of components go here */}
      </form>
    );
  }
}

0 commentaires

2
votes

Si vous souhaitez conserver vos messages d'erreur, je vous recommanderais de réorganiser votre état.

solution si évolutive (vous pouvez ajouter plus de contrôles en les ajoutant à l'état) peut ressembler à: xxx

Exemple de travail

Également si vous construisez une forme complexe, vous pouvez essayer de réagir une solution pour les formulaires, où tout le mécanisme pour Écouter des événements, les mises à jour de l'état, la validation sont déjà gérées pour vous. Comme réactif-Mobx-forme

0 commentaires