react高阶组件封装登录注册输入框

./form.js文件

import React from 'react'


export default function imoocForm(Comp){
	return class WrapperComp extends React.Component{
		constructor(props){
			super(props)
			this.state = {}
			this.handleChange = this.handleChange.bind(this)
		}
		handleChange(key,val){
			console.log(key,val)
			this.setState({
				[key]:val
			})
		}
		render(){
			return <Comp handleChange={this.handleChange} state={this.state} {...this.props}></Comp>
		}
	}
}

在login.js文件中引入imoocForm

import imoocFrom from '../../component/imooc-form/imooc-form.js'

@imoocFrom
class Login extends React.Component{
	handleLogin(){
		//拿到的就是登录输入框信息
		console.log(this.props.state)
	}
	render(){
		return (
			<div>
				<List>
					<InputItem
						onChange={v=>this.props.handleChange('user',v)}
					>用户</InputItem>
					<WhiteSpace />
					<InputItem
						onChange={v=>this.props.handleChange('pwd',v)}
						type='password'
					>密码</InputItem>
				</List>
				<WhiteSpace />
				<Button onClick={this.handleLogin} type='primary'>登录</Button>
				<WhiteSpace />
			</div>
		)
	}
}

export default Login

在register.js文件中引入imoocForm

import imoocForm from '../../component/imooc-form/imooc-form'

@imoocForm
class Register extends React.Component{
	componentDidMount(){
		//默认初始化选中牛人
		this.props.handleChange('type','genius')
	}
	handleRegister(){
		//拿到的就是注册输入框信息
		console.log(this.props.state)
	}
	render(){
		const RadioItem = Radio.RadioItem
		return (
			<div>
				<List>
					<InputItem
						onChange={v=>this.props.handleChange('user',v)}
					>用户名</InputItem>
					<WhiteSpace />
					<InputItem
						type='password'
						onChange={v=>this.props.handleChange('pwd',v)}
					>密码</InputItem>
					<WhiteSpace />
					<InputItem
						type='password'
						onChange={v=>this.props.handleChange('repeatpwd',v)}
					>确认密码</InputItem>
					<WhiteSpace />
					<RadioItem
						checked={this.props.state.type=='genius'}
						onChange={()=>this.props.handleChange('type','genius')}
					>
						牛人
					</RadioItem>
					<RadioItem
						checked={this.props.state.type=='boss'}
						onChange={()=>this.props.handleChange('type','boss')}
					>
						BOSS
					</RadioItem>
					<WhiteSpace />
					<Button type='primary' onClick={this.handleRegister}>注册 </Button>
				</List>
			</div>
		)
	}
}

export default Register