如何使请求正确反应？

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(city)}>touch me soy boy</button>

Answer 2

为什么要在保持状态的同时通过城市。

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

然后在您的getWeather函数中获取城市 const {city} = this.state;