Question

我正在创建一个Web应用程序，它将对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
}

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

1 个答案: