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>