нажатии ентера в диве weather-info__wrapper должен отрисоваться блок с инфой из стейта. Проблема в том, что я не знаю, как рендерить этот самый блок с инфой WeatherInfo при нажатии ентера неограниченное количество раз.
class GetWeather extends React.Component{
constructor(props){
super(props);
this.state = {
city : "Kiev",
temperature : "",
pressure : "",
weatherIcon : "",
weatherDescription : "",
error : "",
}
this.handleInput = this.handleInput.bind(this);
}
handleInput(event){
let value = event.target.value;
if( event.key === "Enter" && value !== ""){
this.setState({
city : value
});
fetch(`http://api.weatherstack.com/current?access_key=5fd75ea7650b3646f6970090bc68a46b&query=`+value+`"`)
.then(res => res.json())
.then((data) => {
console.log(data);
if( data.success ){
this.setState({
temperature : data.current.temperature,
pressure : data.current.pressure,
weatherIcon : data.current.weather_icons,
weatherDescription : data.current.weather_descriptions
});
}
else{
this.setState({
error : data.error
});
}
console.log(this.state);
});
}
}
render(){
return(
<div className="getWeatherWrapper">
<input type="text" onKeyDown={this.handleInput} />
<div className="weather-info__wrapper">
</div>
</div>
);
}
}
Выводи в див данные из стейта. Нажал кнопку — данные обновились. Нажал кнопку — данные обновились. Что не получается?
Используй <form> и type submit для нативной работы с enter
Обсуждают сегодня