react项目——求职webApp(三)

上一篇实现了登录与注册页面的搭建，现在开始编写注册页和登录页的的交互逻辑

注册页

初始化state

this.state = {
   
      user:'',
      pwd:'',
      repeatpwd:'',
      type:null
    }

为每个表单输入组件，添加onChange事件，当输入框的值发生改变时，执行派发的事件函数。

<List>
	<InputItem onChange={
   (value) =>this.handleChange('user',value) }>用户名</InputItem>
	<InputItem 
            type="password"
            onChange={
   (value) =>this.handleChange('pwd',value) }>
            密码
	</InputItem>
	<InputItem 
            type="password"
            onChange={
   (value) =>this.handleChange('repeatpwd',value) }>确认密码</InputItem>
</List>
<WhiteSpace size="lg"></WhiteSpace>
<List>
	<RadioItem 
			//判断通过state.type判断选中项
	 		checked={
   this.state.type == "genuis"}
          	onChange={
   () => {
   this.handleChange("type",'genuis')}}
          	>牛人</RadioItem>
			
          	<RadioItem checked={
   this.state.type == "BOSS"}
          	onChange={
   () => {
   this.handleChange("type",'BOSS')}}
          	>BOSS</RadioItem>
</List>

handleChange()函数，将输入框的value，以{[key]:value}的形式，返回到state

handleChange(key,val){
   
    this.setState({
   
      [key]:val
    })
  }

完成一次表单填写，点击注册时，当前register(注册组件)的state(状态)有四个，

• user（用户名）
• pwd（密码）
• repeatpwd（确认密码）
• typeÿ