组件收集表单数据
理解
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>