J'ai un TextField pour les numéros de téléphone sous une forme abrégée. Et puis je veux masquer ce champ de formulaire comme (0) xxx xxx xx xx.
J'essaie d'utiliser react-input-mask plugin avec Material-UI . Mais si je veux changer la valeur d'entrée, ceci ne met pas à jour le my TextField principal.
<TextField
ref="phone"
name="phone"
type="text"
value={this.state.phone}
onChange={this.onChange}
>
<InputMask value={this.state.phone} onChange={this.onChange} mask="(0)999 999 99 99" maskChar=" " />
</TextField>
En fait, je n'ai trouvé aucune documentation pour le masquage avec Material-UI. J'essaie de comprendre comment puis-je utiliser avec d'autres plugins.
Pour la version actuelle de Material-UI et de react-input-mask, la réponse suivante a fonctionné:
<InputMask
mask="(1)999 999 9999"
value={self.state.inputValue}
onChange={this.getTextFieldValue}
className={this.props.classes.textField}
>
{() => <TextField
id={attribute}
label={attribute}
name={attribute}
className={this.props.classes.textField}
margin="normal"
type="text"
/>}
</InputMask>
Ceci est valable pour les versions actuelles de react-input-mask
et material-ui
:
<InputMask
mask="(0)999 999 99 99"
value={this.state.phone}
onChange={this.onChange}
>
{() => <TextField />}
</InputMask>
Question:
codesandbox.io/s/q8v1259oq6 veuillez vérifier ceci mon test de libellé floatingLabelText est masqué Comment je résous. - Thilina Sampath
Solution de contournement:
Vous pouvez contrôler Label Position avec "floatingLabelFixed" prop. À votre handleChange regarder pour indiquer la valeur d'entrée.
... quand créer avec de la valeur:
constructor(props) {
super(props);
let value = props && props.value ? props.value : '';
let floatingLabelFixed = !!value;
this.state = {
value,
floatingLabelFixed,
};
this.handleChange = this.handleChange.bind(this);
}
... lors de l'édition (onChange):
handleChange(event) {
let value = event && event.target && event.target.value ? event.target.value : '';
let floatingLabelFixed = !!value;
this.setState({
value,
floatingLabelFixed
});
}
... votre contribution:
<TextField
onChange={this.handleChange}
value={this.state.value}
floatingLabelFixed={this.state.floatingLabelFixed}/>