理解
1) 问题: 在react应用中, 如何收集表单输入数据
2) 包含表单的组件分类
a. 受控组件: 表单项输入数据能自动收集成状态
b. 非受控组件: 需要时才手动读取表单输入框中的数据
例子：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<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/prop-types.js"></script>
<script type="text/javascript" src="../js/babel.min.js"></script>
</head>
<body>
<div id="example"></div>
<script type="text/babel">
/*
1. 问题: 在react应用中, 如何收集表单输入数据
2. 包含表单的组件分类
受控组件
非受控组件
*/
/*
需求: 自定义包含表单的组件
1. 界面如下所示
2. 输入用户名密码后, 点击登陆提示输入信息
3. 不提交表单
*/
class LoginForm extends React.Component{
constructor(props) {
super(props)
this.handleSubmit = this.handleSubmit.bind(this)
this.handleChange = this.handleChange.bind(this)
this.state={
pwd:''
}
}
handleSubmit(event) {
//两种方式获取表单的值
const username=this.nameInput.value
const password=this.state.pwd
alert(`准备提交的用户名为: ${username}, 密码:${password}`)
// 阻止事件的默认行为: 提交表单
event.preventDefault()
}
handleChange(event){
this.setState({pwd: event.target.value})
}
render(){
return (
<form onSubmit={this.handleSubmit} action="/test">
<label>
用户名:
<input type="text" ref={input=>this.nameInput=input}/>
</label>
<label>
密码:
<input type="password" value={this.state.pwd} onChange={this.handleChange}/>
</label>
<input type="submit" value="登陆" />
</form>
)
}
}
//渲染应用组件标签
ReactDOM.render(<LoginForm/>,document.getElementById('example'))
</script>
</body>
</html>