import React from 'react';
import ReactDOM from 'react-dom';

function fnFetch(url){
    return fetch(url).then(res=>{
        if(res.ok){
            return res.json();
        }
    }).then(res=>{
        return res;
    })
}

class App extends React.Component{
    state ={
        city:'',
        data:{}
    };
    fetchData = async () =>{
        let city = this.state.city;
        let {result} = await fnFetch(`https://bird.ioliu.cn/weather?city=${city}`);
        //console.log(result);

        this.setState({
            data:result
        });
    };
    keySend = (ev) =>{
        if(ev.which === 13){
            this.fetchData();
        }
    }
    handleChange =(ev) =>{
        let city = ev.target.value;
        this.setState({city});
    }
    render(){
        let {data} = this.state;
        return (<div>
            城市名:<input type="text" value={this.state.city} onChange={this.handleChange} placeholder="请输入城市名字" onKeyDown={this.keySend}/>
            <button onClick={this.fetchData}>搜索</button>
            <p>
                <span>{data.templow} - {data.temphigh}</span>
            </p>
        </div>)
    }
}


ReactDOM.render(
    <App />
    , document.getElementById('root'));