Skip to main content
adicionou 209 caracteres ao conteúdo
Fonte Link
novic
  • 36,7mil
  • 4
  • 32
  • 70

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.

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.

Fonte Link
novic
  • 36,7mil
  • 4
  • 32
  • 70

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>