请选择 进入手机版 | 继续访问电脑版

图文精华

【智能合约实战】-19-Login的状态定义和事件处理定义

2019-12-11 14:55| 发布者: Amuro| 查看: 52| 评论: 0

登录组件状态

 

Login.jsx

 

Class login extends component {

//rcon

Constructorprops{

     Superprops

     

     This.state = {

         Form{

             Username:’’,

             Key:’’,

             Error:’’,

 

}

}

}

 

状态我们用constructor来定义,在constructor里面设置statestate里有formusernamekey,如果出错,有个error。表单里,默认usernamekeyerror都是空的。这是初始状态,组件要反应这个状态,在render里面,组件要把formerror结构出来。

 

Render() {

//dob

Const{ formerror} = this.state

 

解构的是formerror

 

 

接下来要进行的是事件处理。

 

Login.jsx

 

handlechange = (e) =>{

Const { name,value} = e.target;

Const { form } = this.state

 

this.setstate( {

   Form:{

       ……form

       [name]:value,

       error:‘’,

    }

})

 

}

 

写在constructor之后,首先我们从时间中,把namevalue解析出来,从state中,把form解析出来。组件需要反应状态,如果发生变更,要引用函数。

 

<input type =textname=username

Value={form.username}

Onchange={this.handlechange}placeholder=限小写字母a-z1-5.,最大12个字符required/>

 

我们调试一下,就能看见前段填写usernamekey的时候,后端代码也会出现相应的。


鲜花

握手

雷人

路过

鸡蛋
精彩评论

沙发等你来坐!

发布文章
返回顶部