0
116
VisualizaçõesCannot input into text box or click button in react
I cannot click on my input text box or button at all anymore for some reason. It broke as I was styling the elements. When i first load the page, the autofocus attribute still works but as soon as I try to click the button or re-enter the text box it doesn't work.
import React, { useState } from 'react';
import axios from 'axios';
function Header() {
const [text, setText] = useState("");
function handleChange(event) {
setText(event.target.value);
}
function handleClick() {
const geoCoderURL = "http://api.openweathermap.org/geo/1.0/direct?q=" + text + "&limit=5&appid=feab629ddad64dc21d6412ebae467d79"
function getCoordinates(url) {
axios.get(url).then((response) => {
const locationLat = response.data[0].lat;
const locationLon = response.data[0].lon;
console.log(locationLat, locationLon);
});
}
getCoordinates(geoCoderURL);
}
return (
<div className="header">
<h1 className="headerTitle">Five Day Forecast</h1>
<input onChange={handleChange} type="text" name="name" autoFocus placeholder="Enter city name here."/>
<button type="submit" onClick={handleClick}>Forecast</button>
</div>
)
}
export default Header;
·
Juan Pablo Isaza
1 Respostas
Responde à pergunta0
Check this. Here is the Sandbox Link
import React, { useState } from "react";
import axios from "axios";
function Header() {
const [text, setText] = useState("");
const [locationLat, setlocationLat] = useState("");
const [locationLon, setlocationLon] = useState("");
function handleClick() {
console.log(text);
axios.get(
`https://api.openweathermap.org/geo/1.0/direct?q=${text}&limit=5&appid=feab629ddad64dc21d6412ebae467d79`
)
.then(function (response) {
setlocationLat(response.data[0].lat);
setlocationLon(response.data[0].lon);
})
.catch(function (error) {
console.log(error);
});
}
function handleInput(e) {
setText(e.target.value);
}
return (
<div className="header">
<h1 className="headerTitle">Five Day Forecast</h1>
<input
onChange={handleInput}
type="text"
name="name"
autoFocus
placeholder="Enter city name here."
/>
<button onClick={handleClick}>Forecast</button>
<p>{locationLat}</p>
<p>{locationLon}</p>
</div>
);
}
export default Header;
Revoke the API Key or APP ID, Don't post it publically
·
Juan Pablo Isaza
Relatório
Responde à pergunta