Eu estou usando vários components diferentes e tentando integra-los. Nesse exemplo aqui usei react-input-mask e react-material-ui-form-validator, eu estou usando os inputs do material-ui. Alguém sabe como fazer esses components funcionarem em um único component? Minha intenção é fazer um formulário com telefone, cpf e cep. Onde todos teriam uma máscara Ex: (xxx) _ _ _ _- _ _ _ _ e teriam mensagens de erro quando o form fosse submitado. Ex: O campo é obrigatório. (se o campo não for preeenchido)
Abaixo está um tentativa, se alguém já conseguiu fazer algo parecido com o objetivo descrito acima "em negrito" ou mesmo tem algum component que o faça de uma só vez, se puder compartilhar agradeço.
https://material-ui-next.com/demos/text-fields/
https://github.com/sanniassin/react-input-mask
https://github.com/NewOldMax/react-material-ui-form-validator
import React from 'react';
import {
Grid, withStyles
} from 'material-ui';
import { TextValidator, ValidatorForm } from 'react-material-ui-form-
validator';
import { ValidatorComponent } from 'react-form-validator-core';
import InputMask from 'react-input-mask';
class FormMaskVal extends React.Component {
constructor(props) {
super(props);
this.state = {
formData: {
name:''
}
this.handleChange = this.handleChange.bind(this);
this.handleSubmit = this.handleSubmit.bind(this);
}
handleChange(event) {
const { formData } = this.state;
formData[event.target.name] = event.target.value;
this.setState({ formData });
}
handleSubmit() {
this.setState({ submitted: true }, () => {
setTimeout(() => this.setState({ submitted: false }), 5000);
});
}
render(){
const { formData, submitted, alignItems, direction, justify} =
this.state;
const validations = {
ID: ["required"]
}
const OurMaskedInput = (props) => {
const classes = props.classes;
return (
<div>
<MaskedInput
mask={['(', /[1-9]/, /\d/, /\d/, ')', ' ', /\d/, /\d/, /\d/, '-',
/\d/, /\d/, /\d/, /\d/]}
placeholderChar={'\u2000'}
showMask
className={classes.maskedInput}
/>
</div>
);
};
return (
<ValidatorForm
ref="form"
onSubmit={this.handleSubmit}>
<ItemGrid xs={12} sm={12} md={12}>
<TextValidator
className="CustomInput"
onChange={this.handleChange}
name="ID"
type="number"
label="ID"
value={formData.ID}
validators={['required']}
errorMessages={['Is required']}
InputProps={{ inputComponent: OurMaskedInput }}
/>
</ItemGrid>
<Button
color="primary"
type="submit"
label={
(submitted && 'Your form is submitted!')
|| (!submitted && 'Submit')
}
disabled={submitted}
>
Send
</Button>
</ValidatorForm>
)
}
export default FormMaskVal;