0

Bom dia pessoal, estou tentando exibir na tela uma mensagem digitada pelo usuário, algo bem simples porem como sou novo no React não tenho muito noçao de como fazer isso. Bom, o código abaixo foi até aonde eu consegui chegar, ele nao esta pegando os dados do input e nem retornando quando eu clico no botao. Se puderem me ajudar eu ficarei muito grato, Obrigado !

import React, { Component } from 'react'

class Button2 extends Component {
   constructor(props) {
       super(props)

       this.state = {
           text: 'Your Name Here',
       }

   }

   clicked = (event) => {
       this.setState = ({ text: event.target.value })
   }

   handlerSubmit = e => {
       e.preventDefault()
       this.setState = { text: this.state.text }
   }
   render() {
       return (
           <form onSubmit={this.handlerSubmit}>
               {this.state.text}
               <input type="text" />
               <button onClick={this.clicked}>Click on me</button>
           </form>

         )

      }
  }

  export default Button2

1 Resposta 1

0

Como você está naquele momento de aprendizado o nome do componente não faz referencia ao componente e o que ele representa, mas, você está precisando alterar o estado do input text, então precisa programar isso que é no eventoonChange desse input, exemplo:

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

sendo esse função genérica podendo alterar para todo o estado do input, mas, para que isso funcione o nome do input tem que ser passado igual o nome da variável de estado criado que no seu caso em especifico é text.

De um modo geral é feito assim:

handlerOnChangeInput = e => {   
    this.setState({text: e.target.value});
}

mas, fica restrito somente nesse input (pode ser feito assim também não há problemas, só vai escrever um pouco mais porque o código só vai funcionar para esse input e se houver mais que precisa guardar estado então tem que escrever para cada um, por isso eu coloquei o genérico antes, escolha o melhor para você)

O exemplo completo e funcional:

class Button2 extends React.Component {
   constructor(props) {
       super(props)

       this.state = {
           text: 'Your Name Here',
       }

   }

   handlerSubmit = e => {
       e.preventDefault();
       console.log(this.state.text);
   }
   
   handlerOnChangeInput = e => {   
    const {name, value} = e.target;
    this.setState({[name]: value});
   }
   render() {
       return (
           <form onSubmit={this.handlerSubmit}>
               {this.state.text}
               <input type="text" value={this.state.text} name="text" id="text" onChange={this.handlerOnChangeInput} />
               <button onClick={this.clicked}>Click on me</button>
           </form>

         )

      }
  }
ReactDOM.render(<Button2/> , document.getElementById('root'));
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<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="root">Aguarde ...</div>

Observação: o button nesse caso resgata o valor do estado do componente na chave criada, ou seja, é diferente, que no caso para pegar o valor do text precisa digitar this.state.text.

4
  • Olá, vc poderia me explicar melhor essas duas linhas de código ? const {name, value} = e.target; this.setState({[name]: value}); e eu tbm fiquei na duvida o pq vc colocou um value, um name e um id no input mas nao colocou nada no botão. Se puder me responder eu ficarei grato ! Obrigado.
    – Pedro
    Commented 9/11/2019 às 23:05
  • 1
    const {name, value} = e.target; é um como se você fizesse const name = e.target.name; e const value = e.target.value; eu quero desconstruir e.target leia e a parte value, um name e um id no input mas não colocou nada no botão é porque tem que ser feito assim eu coloquei name e id mas, só precisava do name para que a função genérica funcionasse e o botão é um submit do form então o valor é resgatado do estado quando submit o form. @GiovanniManganotti
    – novic
    Commented 9/11/2019 às 23:53
  • Ok, Obrigado pela ajuda !
    – Pedro
    Commented 10/11/2019 às 0:21
  • Se for a resposta do seu pergunta @GiovanniManganotti aceite
    – novic
    Commented 10/11/2019 às 0:46

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 .