致访客
感谢各位一年多的陪伴,因内容调整,本站将于近日迁移到新域名并不再更新主要内容。
特此通知。
感谢各位一年多的陪伴,因内容调整,本站将于近日迁移到新域名并不再更新主要内容。
特此通知。
第十五节
表单
表单输入必须绑定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")
)