保安日记:React框架学习第三篇之生命周期

生命周期

生命周期即是组件从实例化到渲染到最终从页面中销毁,整个过程就是生命周期。在这生命周期中,我们有许多可以调用的事件,也俗称为钩子函数

生命周期的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);
} 

}


  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值