5-react-受控组件非受控组件

非受控组件

现取现用，不会存储到state中

//创建组件
class Login extends React.Component{
	handleSubmit = (event)=>{
		event.preventDefault() //阻止表单提交
		const {username,password} = this
		alert(`你输入的用户名是：${username.value},你输入的密码是：${password.value}`)
	}
	render(){
		return(
			<form onSubmit={this.handleSubmit}>
				用户名：<input ref={c => this.username = c} type="text" name="username"/>
				密码：<input ref={c => this.password = c} type="password" name="password"/>
				<button>登录</button>
			</form>
		)
	}
}
//渲染组件
ReactDOM.render(<Login/>,document.getElementById('test'))

受控组件

存入状态中，以后使用从状态中获取

//创建组件
class Login extends React.Component{
	//初始化状态
	state = {
		username:'', //用户名
		password:'' //密码
	}

	//保存表单数据到状态中
	saveFormData = (dataType)=>{
		return (event)=>{
			this.setState({[dataType]:event.target.value})
		}
	}

	//表单提交的回调
	handleSubmit = (event)=>{
		event.preventDefault() //阻止表单提交
		const {username,password} = this.state
		alert(`你输入的用户名是：${username},你输入的密码是：${password}`)
	}
	render(){
		return(
			<form onSubmit={this.handleSubmit}>
				用户名：<input onChange={this.saveFormData('username')} type="text" name="username"/>
				密码：<input onChange={this.saveFormData('password')} type="password" name="password"/>
				<button>登录</button>
			</form>
		)
	}
}
//渲染组件
ReactDOM.render(<Login/>,document.getElementById('test'))


//这里用到了函数的柯里化
//#region 
		/* 
			高阶函数：如果一个函数符合下面2个规范中的任何一个，那该函数就是高阶函数。
							1.若A函数，接收的参数是一个函数，那么A就可以称之为高阶函数。
							2.若A函数，调用的返回值依然是一个函数，那么A就可以称之为高阶函数。
							常见的高阶函数有：Promise、setTimeout、arr.map()等等

			函数的柯里化：通过函数调用继续返回函数的方式，实现多次接收参数最后统一处理的函数编码形式。 
				function sum(a){
					return(b)=>{
						return (c)=>{
							return a+b+c
						}
					}
				}
			*/
//#endregion

不用柯里化实现受控组件状态的设置

class Login extends React.Component{

    // 初始化state
    state={
        userName:'',
        passWord:''
    }

    saveData=(event)=>{
        // console.log(event.target.value)
        this.setState({[event.target.name]:event.target.value})
    }
    handleSubmit=(event)=>{
        // 阻止默认事件
        event.preventDefault()
        const {userName,passWord}=this.state
        alert(`用户名${userName},密码${passWord}`)
    }
    render() {
        // 现用现取就是非受控组件
        return (
            <form action="#" onSubmit={this.handleSubmit}>
                用户名：<input onChange={this.saveData} type="text" name="userName"/>
                密码：<input onChange={this.saveData} type="password" name="passWord"/>
                <button>登录</button>
            </form>
        );
    }
}
ReactDOM.render(<Login/>,document.getElementById('box'))