1

Quando tento rodar o dev-server ele me retorna um erro no console que eu não consigo identificar o que está gerando ele

webpack.config.js

iconst path = require('path');

module.exports = {
entry: './src/app.js',
output: {
    path: path.join(__dirname,'public'),
    filename: 'bundle.js'
},
module: {
    rules: [{
        loader: 'babel-loader',
        test: /\.js$/,
        exclude: /node_modules/,
        query: {
            presets: ['es2015', 'react']
        }
    },]
},
devtool: 'cheap-module-evel-source-map',
devServer: {
    contentBase:path.join(__dirname,'public'),
    historyApiFallback: true
}
};

Arquivo que da erro

import React from 'react';

class FormCadastroUser extends React.Component {
constructor(props){
    super(props);

    this.onEmailChange = this.onEmailChange.bind(this);
    this.onNameChange = this.onNameChange.bind(this);
    this.onLastNameChange = this.onLastNameChange.bind(this);
    this.onPasswordChange = this.onPasswordChange.bind(this);
    this.onSubmit = this.onSubmit.bind(this);
    this.state={
        name: '',
        lastname: '',
        email: '',
        password: ''
    }
}
onNameChange = (e) => {
    const name = e.target.value;
    this.setState(() => ({name}));
} 
onLastNameChange = (e) => {
    const lastname = e.target.value;
    this.setState(() => ({lastname}));
} 
onEmailChange = (e) => {
    const email = e.target.value;
    this.setState(() => ({email}));
} 
onPasswordChange = (e) => {
    const password = e.target.value;
    this.setState(() => ({password}));
} 
onSubmit = (e) => {
    e.preventDefaut();
    this.props.onSubmit({
        name: this.state.name,
        lastname: this.state.lastname,
        email: this.state.email,
        password: this.state.password
    });
}

render(){
    return (
        <div className= 'container'>
            <form onSubmit={this.onSubmit}>
                <div className="form-row">
                    <div className="col">
                        <input type="text" className="form-control" placeholder="First name" autoFocus value={this.state.name} onChange={this.onNameChange} />
                    </div>
                    <div className="col">
                        <input type="text" className="form-control" placeholder="Last name" value={this.state.lastname} onChange={this.onLastNameChange}/>
                    </div>
                    <div className="col">
                    <input type="Email"    className="form-control" placeholder="Email" value={this.state.email} onChange={this.onEmailChange}/>
                    </div>
                    <div className="col">
                    <input type="text" className="form-control" placeholder="Password" value={this.state.password} onChange={this.onPasswordChange}/>
                    </div>
                </div>
                <div style={{paddingTop: '10px'}}>
                <button type="submit" className="btn btn-primary">Sign in</button>
                </div>
            </form>
        </div>
    );

}
}
export default FormCadastroUser;

O erro acusa no

onNameChange = (e) => { | ^

no sinal de Igual.

1 Resposta 1

1

Muda esses métodos de onNameChange = (e) => { para onNameChange(e) {.

Por duas razões:

  • arrow functions não permitem .bind a outro contexto. Ou seja: const a = () => console.log(this); a.bind('foo')(); vai dar window, ou seja a tua ideia de .bind no construtor fica sem efeito

  • propriedades de classes precisa de mais pacotes babel para configurar e aparentemente isso não está configurado, senão não daria erro.

1
  • Funcionou, muito obrigado, acho que confundi o uso das arrow function, ao inves de usar na decladação de Components, fiz o mau uso nos metodos da classe Commented 28/10/2017 às 16:56

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

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .