非受控组件
表单按钮点击后，不进行页面跳转，通过preventDefault阻止跳转。
输入类元素，数据现用现取，叫做非受控组件。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>非受控组件</title>
</head>
<body>
<div id="test"></div>
<script type="text/javascript" src="js/react.development.js"></script>
<script type="text/javascript" src="js/react-dom.development.js"></script>
<script type="text/javascript" src="js/babel.min.js"></script>
<script type="text/javascript" src="js/prop-types.js"></script>
<script type="text/babel">
class Login extends React.Component{
handleSubmit=(event)=>{
event.preventDefault()
const {userName,passWord}=this
alert(`用户名是${userName.value},密码是${passWord.value}`)
}
render(){
return(
<form action="xxx" 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'))
</script>
</body>
</html>
受控组件
输入类元素，随着输入维护状态，叫受控组件
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>受控组件</title>
</head>
<body>
<div id="test"></div>
<script type="text/javascript" src="js/react.development.js"></script>
<script type="text/javascript" src="js/react-dom.development.js"></script>
<script type="text/javascript" src="js/babel.min.js"></script>
<script type="text/javascript" src="js/prop-types.js"></script>
<script type="text/babel">
class Login extends React.Component{
state={
userName:'',
passWord:''
}
saveUsername=(event)=>{
this.setState({userName:event.target.value})
}
savePassword=(event)=>{
this.setState({passWord:event.target.value})
}
handleSubmit=(event)=>{
event.preventDefault()
const {userName,passWord}=this.state
alert(`用户名是${userName},密码是${passWord}`)
}
render(){
return(
<form action="xxx" onSubmit={this.handleSubmit}>
<input onChange={this.saveUsername} type="text" name="userName"/>
<input onChange={this.savePassword} type="password" name="passWord"/>
<button>登录</button>
</form>
)
}
}
ReactDOM.render(<Login/>,document.getElementById('test'))
</script>
</body>
</html>
函数柯里化
- 高阶函数
函数的参数是一个函数或者函数的返回值是一个函数
- 柯里化
函数继续调用返回函数，多次接受参数处理的方式
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>受控组件</title>
</head>
<body>
<div id="test"></div>
<script type="text/javascript" src="js/react.development.js"></script>
<script type="text/javascript" src="js/react-dom.development.js"></script>
<script type="text/javascript" src="js/babel.min.js"></script>
<script type="text/javascript" src="js/prop-types.js"></script>
<script type="text/babel">
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 action="xxx" 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'))
</script>
</body>
</html>
