Как правильно реагировать на запросы?

Question

Я новичок в ReactJS и пытаюсь создать поле, в котором я могу записать название города и узнать его текущую погоду.

Вот код, который у меня есть

const key = '&APPID=fe338dab6a1fd5b27b01a15c12a16391'
const URL = 'http://api.openweathermap.org/data/2.5/weather?q=';
class Index extends React.Component {
constructor(prop) {
    super(prop);

    this.state = {
        city: '',
        data: [],
        isLoaded: false
    }
}

getWeather(city) {
    fetch(URL + city + key)
        .then(response => response.json())
        .then(data => console.log(data));
}

updateCity(e) {
    this.setState({city: e.target.value});
}


render() {
    let city = this.state.city;
    return (
        <div>
            <input type="text" name="city" onChange={this.updateCity.bind(this)} />
            <button onClick={this.getWeather(city)}>touch me soy boy</button>
        </div>
    );
}

}
export default Index;`

Моя проблема в том, что он отправляет запросы каждый раз, когда я пишу символ.Как заставить его отправлять запрос только при нажатии на кнопку?

Также, порекомендуйте мне любые источники, где я могу узнать больше о React, чтобы перестать задавать вопросы на этом сайте =)

Answer 1

Почему вы хотите передать город, когда вы поддерживаете его в состоянии.

<button onClick={this.getWeather}>Get Weather</button>

И в вашей функции getWeather получите город const {city} = this.state;

Answer 2

Просто синтаксис:

<button onClick={() => this.getWeather(city)}>touch me soy boy</button>