0

Eu estou aprendendo reactjs e me deparei com uma situação que preciso de ajuda para entender, e por ser específico não consegui encontrar nenhuma referência sobre isso.

Tenho o arquivo Input.js

import React, { Component } from 'react'
import Input, { InputBootstrap } from 'react-bootstrap'

export default class Input extends Component {
    render() {
        return (
            <div>
                <label htmlFor={this.props.id}>
                    <span>{this.props.label}: </span>
                    <InputBootstrap id={this.props.id} type={this.props.type} name={this.props.name} value={this.props.value} onChange={this.props.onChange} alt={this.props.alt} placeholder={this.props.placeholder} />
                </label>
            </div>
        );
    }
}

Com o intuito de criar um input genérico para o meu SPA.

E o arquivo Cadastro.js

export default class Cadastro extends Component {
    constructor() {
        super();
        self = this;

        ...
    }

    render() {
        return (
            <div>
                <Input id='nome' type='text' name='nome' label='Nome' value={self.state.nome} onChange={self.setNome} placeholder='Seu nome' alt='Nome do Cliente' />
                <Input id='telefone' type='text' name='telefone' label='Telefone' value={self.state.telefone} onChange={self.setTelefone} placeholder='(11) 1111-1111' alt='Telefone do Cliente' />
                <Input id='dataDeNascimento' type='date' name='dataDeNascimento' label='Data de Nascimento' value={self.state.dataDeNascimento} onChange={self.setDataDeNascimento} placeholder='DD/MM/AAAA' alt='Data de nascimento do Cliente' />
                <Input id='cpf' type='number' name='cpf' label='CPF' value={self.state.cpf} onChange={self.setCPF} placeholder='123.456.789-10' alt='CPF do Cliente'/>
                <Input id='email' type='email' name='email' label='E-mail' value={self.state.email} onChange={self.setEmail} placeholder='[email protected]' alt='Email do Cliente' />
                ...

Mas tenho usado um padrão para não precisar ficar inserindo .bind(this) ao final de cada método que crio, usando o self = this;

Seguindo esse padrão ficaria assim o arquivo Input.js

import React, { Component } from 'react'

var self;

export default class Input extends Component {
constructor() {
    super();
    self = this;
}

render() {
    return (
        <div>
            <label htmlFor={self.props.id}>
                <span>{self.props.label}: </span>
                <input id={self.props.id} type={self.props.type} name={self.props.name} value={self.props.value} onChange={self.props.onChange} alt={self.props.alt} placeholder={self.props.placeholder} />
            </label>
        </div>
    );
}
}

Usando dessa forma o resultado que tenho na tela não é o esperado, logo que insiro o primeiro caractere em qualquer input da tela fica conforme na imagem.

Print da tela

Não entendo o motivo de alterar todos os campos para o útltimo da lista que criei no arquivo Cadastro.js

Conseguem me ajudar, por favor?

1 Resposta 1

1

Quando tens um ficheiro como Input.js esse ficheiro é lido somente 1 vez. Independentemente de quantos componentes (instâncias) de <Input /> criares, esse ficheiro só terá sido lido 1 vez. Então o que acontece é que essa variável global só é lida uma vez, e é a mesma para todos os componentes, e não uma nova variável por componente...

A vantagem de usar classes é poder facilmente ter uma referência a si próprio usando o this. Para ajudar a correr funções com o contexto de execução pretendido podes usar arrow functions (() => {}) que preservam o this dentro do escopo.

Esse problema de usar o .bind(this) era muito comum em React antigo, antes de se usarem classes nativas, ou seja quando o React usava Objetos o que na prática gerava uma função com métodos que tinham de ser associados via .bind() à instância.

React moderno com arrow functions permite usar-se assim, como no exemplo onClick em baixo:

class Pessoa extends React.Component {
  constructor() {
      super();
      this.state = {
        mostrarNome: false, 
      };
  }
  render() {
    const nome = this.state.mostrarNome && (<div>{this.props.nome}</div>);
    const button = !this.state.mostrarNome && (<button onClick={() => this.setState({mostrarNome: true})}>Quem sou eu?</button>);
    return (
      <div>
        {nome}
        {button}
      </div>
    );
  }
}

ReactDOM.render(
  <div>
    <Pessoa nome="Maria" />
    <Pessoa nome="Antonio" />
  </div>,
  document.getElementById("react")
);
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

<div id="react"></div>

2
  • Entendi! Obrigado pela resposta! Commented 17/04/2019 às 3:43
  • @DanilloParreira se a resposta resolveu o teu problema pode clicar para marcar como aceite.
    – Sergio
    Commented 17/04/2019 às 4:48

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 .