React不提交表单并且获取表单中的数据
生活随笔
收集整理的這篇文章主要介紹了
React不提交表单并且获取表单中的数据
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>1_非受控組件</title>
</head>
<body><!-- 準備好一個“容器” --><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轉為js --><script type="text/javascript" src="../js/babel.min.js"></script><script type="text/babel">//創建組件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>
總結
以上是生活随笔為你收集整理的React不提交表单并且获取表单中的数据的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 股票图像的历史与未来-采访123RF
- 下一篇： React类里面能写的东西