2.5 收集表单数据
-
效果
定义一个包含表单的组件,输入用户名和密码之后,点击登录有弹框提示
// 创建组件 class Login extends React.Component{ showInfo = (event)=>{ // 阻止表单的提交 event.preventDefault(); const { username, password} = this; alert(`你输入的的用户名是${ username.value},你输入的密码是${ password.value} `) } render (){ return ( <form action="http://www.atguigu.com" onSubmit={ this.showInfo}> 用户名:<input ref={ c=>this.username=c} type="text" name="username" /> <br/> 密码:<input ref={ c=>this.password = c} type="password" name="password" /> <br/> <button>登录</button> </form> ) } } // 渲染组件 ReactDOM.render(<Login/>, document.getElementById('container'))
-
理解
-
受控组件
// 创建组件 class Login extends React.Component{ // 初始化状态 state = { username : '', password : '' } // 保存用户名到状态中 saveUsername = (event)=>{ console.log(event.target.value); this.setState({ username : event.target.value }) } // 保存密码到状态中 savePassword = (event)=>{ console.log(event.target.value); this.setState({ password : event.target.value }) } showInfo = (event)=>{ // 阻止表单的提交 event.preventDefault(); const { username, password} = this.state; alert(`你输入的的用户名是${ username},你输入的密码是${ password} `) } render (){ return ( <form action="http://www.atguigu.com" onSubmit={ this.showInfo}> 用户名:<input onChange={ this.saveUsername} type="text" name="username" /> <br/> 密码:<input onChange={ this.savePassword} type="password" name="password" /> <br/> <button>登录</button> </form> ) } } // 渲染组件 ReactDOM.render(<Login/>, document.getElementById('container'))
-
非受控组件 : 现用现取
-