React学习笔记【13】

第十五节

表单

表单输入必须绑定value值和onChange事件

本节代码

沿用了之前COVID-Map的代码
React学习笔记【10】

components/SearchCom.jsx

import React from 'react'

export default class SearchCom extends React.Component {
    constructor(props) {
        super(props)
        this.state = {
            value: "",
            result: null
        }
    }
    searchEvent = (e) => {
        if (e.keyCode === 13) {//当keyCode十hui
            //查询操作
            console.log(e.target.value);
            console.log(this.props.countriesObj[e.target.value]);
            if (this.props.countriesObj[e.target.value]) {
                console.log(this.props.countriesObj[e.target.value]);
                this.setState({
                    result: <div>
                        <div>确诊 {this.props.countriesObj[e.target.value].confirm}</div>
                        <div>疑似 {this.props.countriesObj[e.target.value].suspect}</div>
                        <div>死亡 {this.props.countriesObj[e.target.value].dead}</div>
                        <div>治愈 {this.props.countriesObj[e.target.value].heal}</div>
                    </div>
                })

            } else {
                this.setState({
                    result: <h2>未找到相关结果</h2>
                })
            }
        }
    }
    changeEvent = (e) => {
        this.setState({
            value: e.target.value
        })
    }
    render() {
        return (
            <div>
                <input type="text" onChange={this.changeEvent} value={this.state.value} onKeyDown={this.searchEvent} placeholder="请输入查询省份" />
                <div>
                    <h2>查询结果：</h2>
                    <div>
                        {this.state.result}
                    </div>
                </div>
            </div>
        )
    }
}

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import SearchCom from './components/SearchCom';
import jsonData from './list-total.json'



//jsonData 相当于向后台发ajax请求
// console.log(jsonData.data.areaTree);
// console.log(jsonData.data.areaTree[0].name);//国家名
// console.log(jsonData.data.areaTree[0].today.confirm);//今日确诊
// console.log(jsonData.data.areaTree[0].today.suspect);//今日疑似
// console.log(jsonData.data.areaTree[0].today.dead);//死亡病例
// console.log(jsonData.data.areaTree[0].today.heal);//今日治愈



let countriesObj = {}

jsonData.data.areaTree.forEach((item, i) => {
    item.today.confirm = item.today.confirm ? item.today.confirm : 0;
    item.today.suspect = item.today.suspect ? item.today.suspect : 0;
    item.today.dead = item.today.dead ? item.today.dead : 0;
    item.today.heal = item.today.heal ? item.today.heal : 0;

    countriesObj[item.name] = {
        confirm: item.today.confirm,
        suspect: item.today.suspect,
        dead: item.today.dead,
        heal: item.today.heal
    }

})
console.log(countriesObj);

let countriesList = []
for (const key in countriesObj) {
    countriesObj[key].country = key
    countriesList.push(countriesObj[key])
}


//排序
countriesList.sort((a, b) => {
    return a.confirm < b.confirm ? 1 : -1;
})

console.log(countriesList)

// ----------------------------------------
class COVIDList extends React.Component {
    render() {
        return (
            <div>

                <h1>全球今日疫情动态</h1>
                <SearchCom countriesObj={countriesObj} />
                <table style={{ 'border': '1px solid #ccc', padding: '5%' }}>
                    <thead style={{ backgroundColor: '#ccc' }}>
                        <tr>
                            <th>编号</th>
                            <th>地区</th>
                            <th>确诊</th>
                            <th>疑似</th>
                            <th>死亡</th>
                            <th>治愈</th>
                        </tr>
                    </thead>
                    <tbody>
                        {
                            this.props.countriesList.map((item, index) => {
                                return (
                                    <tr key={index} style={{ backgroundColor: '#ddd' }}>
                                        <td>{index + 1}</td>
                                        <td>{item.country}</td>
                                        <td>{item.confirm}</td>
                                        <td>{item.suspect}</td>
                                        <td>{item.dead}</td>
                                        <td>{item.heal}</td>
                                    </tr>
                                )
                            })
                        }
                    </tbody>
                </table>
            </div>
        )
    }
}

ReactDOM.render(
    <COVIDList countriesList={countriesList} />
    ,
    document.querySelector("#root")
)