J'utilise le composant TextField pour capturer le numéro de téléphone. Comme l'utilisateur tape, je veux invalider l'entrée si ce n'est pas un nombre ou s'il ne suit pas un format et afficher le errorText. Actuellement errorText est affiché même sans toucher le champ. Comment puis-je obtenir ce comportement?
Toute aide est grandement appréciée.
5 réponses
En étendant la réponse Larry, définissez errorText sur une propriété en état (errorText dans l'exemple ci-dessous). Lorsque la valeur dans TextField change, validez l'entrée et définissez la valeur de la propriété (errorText) pour afficher et masquer l'erreur.
class PhoneField extends Component
constructor(props) {
super(props)
this.state = { errorText: '', value: props.value }
}
onChange(event) {
if (event.target.value.match(phoneRegex)) {
this.setState({ errorText: '' })
} else {
this.setState({ errorText: 'Invalid format: ###-###-####' })
}
}
render() {
return (
<TextField hintText="Phone"
floatingLabelText="Phone"
name="phone"
errorText= {this.state.errorText}
onChange={this.onChange.bind(this)}
/>
)
}
}
Version de travail Material-UI v3.9.3:
class UserProfile extends React.Component {
constructor(props) {
super(props);
this.state = { helperText: '', error: false };
}
onChange(event) {
if (event.target.value.length > 2) {
this.setState({ helperText: '', error: false });
} else {
this.setState({ helperText: 'Invalid format', error: true });
}
}
render() {
return (
<TextField
helperText={this.state.helperText}
onChange={this.onChange.bind(this)}
error={this.state.error}
required
id="outlined-required"
label="First Name"
/>
);
}
Veuillez ajouter un helperText qui à l'état d'erreur vrai apparaît à l'écran. Je partage un lien pour vous https://material-ui.com/components/text-fields/#validation
Depuis la version 0.20.1, vous pouvez utiliser les accessoires helperText et error
<TextField
hintText="Phone"
error ={this.state.errorText.length === 0 ? false : true }
floatingLabelText="Phone"
name="phone"
helperText={this.state.errorText}
onChange={this.onChange.bind(this)}/>
Si errorText est une chaîne vide "", elle ne sera pas affichée. Donc, définissez-le sur getInitialState ().