在点击事件上运行 AJAX 调用 - 使用 React.js

Question

我正在创建一个网络应用程序，该应用程序将对 OpenWeather API 进行 AJAX 调用以获取城市的天气数据 - 基于用户单击的城市。

我在前端使用 React，在后端使用 Node.js/Express，但在实现如何根据用户点击进行 API 调用的正确设置时遇到了麻烦。

如何重构我的代码以使其基于点击？

这是我目前所拥有的（JSBIN：http://bit.ly/1WedsL2）——目前被硬编码为“伦敦”：

 var data = [
    {name: "London"},
    {name: "Tokyo"},
    {name: "NYC"}
];

var MusicBox = React.createClass({
    render: function() {
        return (
            <div className="musicBox">
                <h1>This is the music box</h1>
                <CityList data={this.props.data} />
            </div>
        );
    }
});

var CityList = React.createClass({
    getInitialState: function() {
        return {data: []};
    },
    componentDidMount: function() {
        $.ajax({
            url: 'http://api.openweathermap.org/data/2.5/weather?q=London,uk&appid=bd82977b86bf27fb59a04b61b657fb6f',
            method: 'GET',
            success: function(result) {
                this.setState({data: result});
            }.bind(this)
        });
    },
    render: function() {
        var cityNodes = this.state.data.map(function(city) {
            return (
                <City info={city} />
            );
        });
        return (
            <div className="cityList">
                {cityNodes}
            </div>
        );
    }
});

var City = React.createClass({
    render: function() {
        return (
            <div className="city">
                <h2 className="cityName">
                    {this.props.info.name}
                </h2>
                {this.props.children}
            </div>
        );
    }
});

var CityInfo = React.createClass({
    getInitialState: function() {
        return {data: {}};
    },
    componentDidMount: function() {
        $.ajax({
            url: 'http://api.openweathermap.org/data/2.5/weather?q=London,uk&appid=bd82977b86bf27fb59a04b61b657fb6f',
            method: 'GET',
            success: function(result) {
                this.setState({data: result});
            }.bind(this)
        });
    },

    render: function() {
        return (
            <div>
                <h3>{this.state.data.name}</h3>
            </div>
        );
    }
});


ReactDOM.render(
    <MusicBox data={data} />,
    document.getElementById('content')
);

Answer 1

您想要做的是有一个用户可以点击的按钮。这将用于您的 ajax 请求，而不是在 componentDidMount 中。

在你的渲染中添加一个按钮

<button onClick={this.loadCityInfo} data-city={this.props.info.name}>{this.props.info.name}</button>

你的函数应该是这样的

loadCityInfo: function(e){
    var city = $(e.currentTarget).data('city');
    // now make your ajax request with the city's name passed to pull out the correct data
}