react中收集表单数据
2. 受控组件(类似vue中的双向数据绑定),建议还是写受控组件
<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 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>