生命周期
生命周期即是组件从实例化到渲染到最终从页面中销毁,整个过程就是生命周期。在这生命周期中,我们有许多可以调用的事件,也俗称为钩子函数
生命周期的3个状态:
Mounting(挂载):将组件插入到DOM中
Updating:将数据更新到DOM中
Unmounting(卸载):将组件移除DOM中
生命周期中的钩子函数(方法,事件)
componentWillMount :组件将要渲染,AJAX,添加动画前的类
componentDidMount:组件渲染完毕,添加动画
componentWillReceiveProps:组件将要接受props数据,查看接收props的数据什么
ShouldComponentUpdate:组件接收到新的state或者props,判断是否更新。返回布尔值
componentWillUpdate:组件将要更新
componentDidUpdate:组件已经更新
componentWillUnmount:组件将要卸载
表单
import react from 'react'
export default class SearchCom extends react.Component{
constructor(props){
super(props)
this.state ={
value:'',
result:null
}
}
render(){
return(
<div>
<input type="text"
value={this.state.value}
placeholder='请输入查询的省份'
onKeyDown={this.searchEvent}
onChange={this.onChange}
/>
<div>
<h2>查询结果</h2>
{this.state.result}
</div>
</div>
)
}
searchEvent=(e)=>{
if(e.keyCode===13){
console.log(e.keyCode); //当keycode是回车时执行查询
console.log(e.target.value);
let num = this.props.provincesObj[e.target.value]
if(num ==undefined){
this.setState({
result: <h2>输入错误,请输入正确省份</h2>
})
}else{
this.setState({
result:<div>
<div>确诊人数:{num.confirm}</div>
<div>痊愈人数:{num.heal}</div>
<div>死亡人数:{num.dead}</div>
</div>
})
}
}
}
onChange=(e)=>{
this.setState({
value:e.target.value
})
console.log(e.target.value);
}
}
value:e.target.value
})
console.log(e.target.value);
}
}