Validation des champs de formulaire sur un clic de bouton dans le contrôle de l'interface utilisateur du bureau

Question

J'ai un TextField et un PrimaryButton dans mon formulaire.

Cliquez sur le bouton pour valider le champ de texte.S'il n'y a pas de valeur, déclenchez la validation fieldfield requise pour cliquer sur le bouton et afficher le même message que pour l'événement onGetErrorMessage.

Je sais que la validation est un événement fire onBlur mais je veux déclencher la validation en cliquant sur le bouton.

Comment puis-je le faire?

Answer 1

D'abord, vous devez utiliser refs à votre TextField

<TextField ref={(input) => { this.textInput = input; }} label='test' /> 

vous pouvez maintenant définir onGetErrorMessage sur clic en utilisant refs

onClick(e){ 
    if(this.refs.input.value == undefined || this.refs.input.value == null || this.refs.input.value == '') 
     this.refs.input.onGetErrorMessage = "you error message" 
} 

Mise à jour 1: Découvrez ce code snippet

class FormExample extends React.Component { 
    constructor() { 
    super(); 
    this.state={ 
     inputError:'' 
    } 
    this.ValidateText = this.ValidateText.bind(this) 
    } 
    ValidateText(e){ 
    this.setState({ 
     inputError:this.input.value?'':'testing' 
    }) 
    } 
    render() { 
    return (
     <div> 
     <div> 
      <TextField 
      ref={(input) => { this.input = input; }} 
      label="Name" 
      errorMessage={this.state.inputError} 
     /> 
      <input type='button' value='Submit' 
      onClick={this.ValidateText} /> 
     </div> 
     </div> 
    ); 
    } 
}