0

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;
1

0

Você deve fazer log-in para responder a esta pergunta.

Pesquise outras perguntas com a tag .