reactjs中收集表单数据：非受控组件和受控组件
生活随笔
收集整理的這篇文章主要介紹了
reactjs中收集表单数据：非受控组件和受控组件
小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
1_非受控組件
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>1_非受控組件</title> </head> <body><!-- 準(zhǔn)備好一個(gè)“容器” --><div id="test"></div><!-- 引入react核心庫 --><script type="text/javascript" src="../js/react.development.js"></script><!-- 引入react-dom，用于支持react操作DOM --><script type="text/javascript" src="../js/react-dom.development.js"></script><!-- 引入babel，用于將jsx轉(zhuǎn)為js --><script type="text/javascript" src="../js/babel.min.js"></script><script type="text/babel">//創(chuàng)建組件class Login extends React.Component{handleSubmit = (event)=>{event.preventDefault() //阻止表單提交const {username,password} = thisalert(`你輸入的用戶名是：${username.value},你輸入的密碼是：${password.value}`)}render(){return(<form onSubmit={this.handleSubmit}>用戶名：<input ref={c => this.username = c} type="text" name="username"/>密碼：<input ref={c => this.password = c} type="password" name="password"/><button>登錄</button></form>)}}//渲染組件ReactDOM.render(<Login/>,document.getElementById('test'))</script> </body> </html>2_受控組件
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>2_受控組件</title> </head> <body><!-- 準(zhǔn)備好一個(gè)“容器” --><div id="test"></div><!-- 引入react核心庫 --><script type="text/javascript" src="../js/react.development.js"></script><!-- 引入react-dom，用于支持react操作DOM --><script type="text/javascript" src="../js/react-dom.development.js"></script><!-- 引入babel，用于將jsx轉(zhuǎn)為js --><script type="text/javascript" src="../js/babel.min.js"></script><script type="text/babel">//創(chuàng)建組件class Login extends React.Component{//初始化狀態(tài)state = {username:'', //用戶名password:'' //密碼}//保存用戶名到狀態(tài)中saveUsername = (event)=>{this.setState({username:event.target.value})}//保存密碼到狀態(tài)中savePassword = (event)=>{this.setState({password:event.target.value})}//表單提交的回調(diào)handleSubmit = (event)=>{event.preventDefault() //阻止表單提交const {username,password} = this.statealert(`你輸入的用戶名是：${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> </body> </html>總結(jié)
以上是生活随笔為你收集整理的reactjs中收集表单数据：非受控组件和受控组件的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： reactjs高阶函数和函数柯里化
- 下一篇： reactjs中的事件处理