Ainda não tem acesso? Estude com a gente! Matricule-se
Ainda não tem acesso? Estude com a gente! Matricule-se

Solucionado (ver solução)

Erro na exibição do PopUp Cannot read property 'jquery' of undefined

import M from 'materialize-css'

const Popup ={
    exibeMensagem : (status, msg) =>{
        if(status === "success"){
            M.toast({ html: msg, classes: 'green', dispalyLength: 2000})

        }

        if(status === "error"){
            M.toast({ html: msg, classes: 'red', dispalyLength: 2000})

        }
    }
}

export default Popup;
2 respostas
import React, { Component } from 'react';
import FormValidator from './FormValidator'
import Popup from './Popup'

class Formulario extends Component {
    constructor(props) {
        super(props)
        this.validador = new FormValidator([
            {
                campo: "nome",
                metodo: "isEmpty",
                validoQuando:false,
                mensagem
:"Entre com um Nome"
            },
            {
                campo: "livro",
                metodo: "isEmpty",                
                validoQuando:false,
                mensagem:"Entre com um Livro"
            },
            {
                campo: "preco",
                metodo: "isInt",
                args:[{min:0, max:99999}],
                validoQuando:true,
                mensagem:"Entre com um Numerico"
            }
        ]);

        this.stateInicial = {
            nome: '',
            livro: '',
            preco: '',
            validacao: this.validador.valido()
        }

        this.state = this.stateInicial;
    }

    escutadordeInput = event => {
        const { name, value } = event.target;
        this.setState({
            [name]: value
        })

    }

    submitFormulario = () => {

        const validacao = this.validador.valida(this.state);

        if (validacao.isValid) {
            this.props.escutadorDeSubmit(this.state)
            this.setState(this.stateInicial);
        } else {
            const{ nome, livro, preco } = validacao
            const campos = [nome, livro, preco];
            const camposIvalidos = campos.filter(elem =>{
                return elem.isInvalid;
            })
            camposIvalidos.forEach(campo => {
               Popup.exibeMensagem('error', campo.mensagem) 
            });
        }
    }

    render() {

        const { nome, livro, preco } = this.state;
        return (
            <form>
                <div className="row">
                    <div className="input-field col s4">
                        <label className="input-field" htmlFor="nome">Nome</label>
                        <input className="validate" id="nome" type="text" name="nome" value={nome} onChange={this.escutadordeInput} />
                    </div>
                    <div className="input-field col s4">
                        <label className="input-field" htmlFor="livro">Livro</label>
                        <input className="validate" id="livro" type="text" name="livro" value={livro} onChange={this.escutadordeInput} />
                    </div>
                    <div className="input-field col s4">
                        <label className="input-field" htmlFor="preco">Preço</label>
                        <input className="validate" id="preco" type="text" name="preco" value={preco} onChange={this.escutadordeInput} />
                    </div>
                </div>
                <button className="waves-effect waves-light btn" onClick={this.submitFormulario} type="button">Salvar</button>

            </form>
        );
    }
}

export default Formulario;
solução

Essa linha estava incorreta Popup.exibeMensagem('error', campo.message)

Quer mergulhar em tecnologia e aprendizagem?

Receba a newsletter que o nosso CEO escreve pessoalmente, com insights do mercado de trabalho, ciência e desenvolvimento de software