Sou iniciante com o React e estou com uma dificuldade em recuperar o valor de uma props, em um componente filho. Tenho um componente chamado Busca, que ao clicar em um botão, eu passo via props o valor para um outro componente, que chamei de Mapa Eu consigo recuperar o valor, mas somente dentro do método render. Como eu recupero o valor e atribuo a uma outra variável por exemplo ou state para que eu possa utilizar em algum outro método?
Busca.js:
import React, { Component } from 'react';
import Mapa from './Mapa';
class Busca extends Component {
constructor(props){
super(props);
this.state = {
input: '',
cep: ''
};
this.buscarEndereco = this.buscarEndereco.bind(this)
}
buscarEndereco(){
this.setState({
input: '',
cep: this.state.input
});
}
updateInputValue(evt) {
this.setState({
input: evt.target.value
});
}
render() {
return (
<div className="container">
<h3>Consultade endereço</h3>
<div className="col-md-6 jumbotron">
<div className="form-group row">
<div className="col-sm-12">
<p><strong>Consultar</strong></p>
</div>
<label for="colFormLabel" className="col-sm-2 col-form-label">CEP</label>
<div className="col-sm-5">
<input value={this.state.input} type="text" onChange={evt => this.updateInputValue(evt)} className="form-control" />
</div>
<div className="col-sm-3">
<input type="button" onClick={this.buscarEndereco} value="Buscar" className="btn btn-primary"/>
</div>
</div>
</div>
<Mapa cep={this.state.cep}/>
</div>
);
}
}
export default Busca;
Mapa.js
import React, { Component } from 'react';
class Mapa extends Component {
constructor(props){
super(props);
}
render() {
return (
<div>
<h1>Mapa {this.props.cep}</h1>
</div>
);
}
}
export default Mapa;
Mapa
,this.props.cep
irá funcionar em qualquer métodolet minhaVar = this.props.cep;
em qualquer método da classeMapa
. Não estou a conseguir perceber a dificuldade.this.setState
e nãoprops
. Acho que o melhor é exemplificar a linha de código onde está a tentar obter esse valor. Colocar exatamente como tentou e não funcionou.