1)非受控组件:
现用现取就是非受控,需要时才手动读取表单输入框中的数据(借助ref现用现取)
2) 受控组件
表单项输入数据能自动收集成状态, 随着输入维护状态就是受控,开发中建议使用
<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=(ecent)=>{
event.preventDefault()//阻止表单提交
const {username,password}=this.state
alert(`你输入的用户名是${username},你输入的密码是${password}`)
}
render(){
return(
<form action="http://www.baidu.com" 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>