<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div id="example"></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/babel"> /* * 需求：自定义包含表单的组件 * 1.输入用户名密码后，点击登录提示输入信息 * 2.不提交表单 * */ /* * 受控组件：密码框是,表单项输入数据能自动收集成状态 * 非受控组件：用户框是，需要时才手动读取表单输入框中的数据 * */ // 创建虚拟组件 class LoginForm extends React.Component { constructor(props) { super(props); //第二种思路，初始化状态 this.state = { pwd: '' } //第一种思路 this.handleSubmit = this.handleSubmit.bind(this); this.handleChange = this.handleChange.bind(this); } handleSubmit(event) { const name = this.nameInput.value const {pwd} = this.state alert(`准备提交的用户名为：${name},密码为:${pwd}`) // 阻止事件的默认行为(提交) event.preventDefault(); } handleChange(event) { //读取当前输入框的值 const pwd = event.target.value //更新pwd的状态 this.setState({pwd}) } render() { //当提交表单的时候,调用handleSubmit回调函数 return <form action="/test" onSubmit={this.handleSubmit}> 用户名：<input type="text" ref={input => this.nameInput = input}/> 密码：<input type="password" value={this.state.pwd} onChange={this.handleChange}/> <input type="submit" value="登录"/> </form> } } // 渲染组件 ReactDOM.render(<LoginForm/>, document.getElementById("example")); </script> </body> </html>
13_组件_收集表单数据
猜你喜欢
转载自www.cnblogs.com/zhanzhuang/p/10715445.html
今日推荐
周排行