3
votes

Comment définir ErrorMessage sur TextField dynamiquement sur la méthode Button onClick

Je dois lier ErrorMessage au champ de texte uniquement lorsque l'utilisateur appuie sur le bouton. Dans celui-ci, il y a de bons exemples d'utilisation du message d'erreur, mais le problème est que je ne sais pas comment ajouter errorMeesage après que l'utilisateur clique sur

private _buttonOnClickHandler() {
    let textvalue = document.getElementById('titleField')["value"];

    if(textvalue === "")
    {
        //call onGetErrorMessage or something that will set ErrorMeesage and input will be red
    }

    return false;
}

Et ceci est un appel d'un bouton: p>

 <TextField id='titleField' value={titleValue} required={true} label={escape(this.props.description)} onGetErrorMessage={this._getErrorMessage} validateOnLoad={false} />

Merci

reactjs spfx office-fabric

0 commentaires

3 Réponses :

0
votes

Vous devez définir l'état pour afficher / masquer les messages d'erreur en fonction de l'entrée de l'utilisateur. Vérifiez le code ci-dessous

import React, { Component } from 'react';

class App extends Component {
  state = {
    isErrorMessageHidden: true
  }
  clickHandler = () => {
    let textValue = document.getElementById('titleField').value;
    if(textValue === '')
      this.setState({isErrorMessageHidden: false});
    else
      this.setState({isErrorMessageHidden: true});    
  }
  render() {
    return (
      <div>
       <button onClick={this.clickHandler}>Check</button>
       <input type='text' id='titleField' />
       <p 
          style={{'color':'red'}}
          hidden={this.state.isErrorMessageHidden}
        >Please fill the form</p>
       </div>
    );
  }
}

export default App;

J'espère que cela vous aidera.

0 commentaires

3
votes

Le moyen le plus simple auquel je pense pour y parvenir est de prédire le onGetErrorMessage sur une vérification d'état, qui permet de savoir si le bouton a été cliqué.

private _buttonOnClickHandler() {
    this.setState({ buttonHasBeenClicked: true });

    return false;
}

Ensuite, dans votre gestionnaire de clic de bouton, définissez simplement cette valeur d'état:

<TextField
    id='titleField'
    value={titleValue}
    required={true}
    label={escape(this.props.description)}
    // Only allow showing error message, after determining that user has clicked the button
    onGetErrorMessage={this.state.buttonHasBeenClicked ? this._getErrorMessage : undefined}
    validateOnLoad={false}
/>

Tant que vous instanciez buttonHasBeenClicked sur false, cette méthode rencontrera l'exigence selon laquelle (a) avant que l'utilisateur ne clique sur le bouton, aucun message d'erreur ne soit affiché par le TextField , et (b) après que l'utilisateur clique sur le bouton, les messages d'erreur commencent à s'afficher. Vous conservez la possibilité d'utiliser _getErrorMessage (value) pour personnaliser le message d'erreur en fonction de la valeur actuelle dans le TextField.

0 commentaires

0
votes

Une autre approche serait de gérer toutes les validations via des valeurs d'état.

La définition du contrôle va comme ceci

private _onVenueChange = (event: React.FormEvent<HTMLTextAreaElement | HTMLInputElement>, newValue?: string): void => {

this.setState(prevState => ({
  errorData: {
    ...prevState.errorData,
    isValidVenue: newValue && newValue.length > 0,
    isValidForm: this.state.errorData.isValidForm && newValue && newValue.length > 0
  }
}));

this.setState(prevState => ({
  formData: {
    ...prevState.formData,
    venue: newValue
  }
}));
}

Sur l'événement Onchange, vous validez le contrôle et définissez la valeur de l'état d'erreur comme ci-dessous,

<TextField placeholder="Enter a venue location" required onChange={this._onVenueChange} {...this.state.errorData.isValidVenue ? null : { errorMessage: strings.RequiredFieldErrorMessage }}></TextField>

Dans l'exemple ci-dessus, j'utilise deux objets dans les états, l'un pour capturer les valeurs et l'autre pour savoir si le champ est une erreur ou non.

J'espère que cela vous aidera ..

A bientôt !!!

0 commentaires