React --- 收集表单数据(非受控组件和受控组件)
Posted So istes immer
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了React --- 收集表单数据(非受控组件和受控组件)相关的知识，希望对你有一定的参考价值。
需求：定义一个包含表单的组件，输入用户名密码后，点击登录提示输入信息(页面不刷新)
1.非受控组件
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"></meta>
<title></title>
</head>
<body>
<div id="test"></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">
class Login extends React.Component
handleSubmit = (event) =>
event.preventDefault()
const username,password = this
alert(`你输入的用户名是：$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.受控组件
对于这种像input这样输入类的DOM，随着用户的输入，输入的数据被维护在状态state里，等需要用的时候再从状态state里面取出来
类似于Vue中的双向数据绑定
受控组件的优势在于：比上面的非受控组件少用了refs
<script type="text/babel">
class Login extends React.Component
//保存用户名和密码到状态中
saveUsername = (event) =>
this.setState(username: event.target.value)
savePassword = (event) =>
this.setState(password: event.target.value)
handleSubmit = (event) =>
event.preventDefault()
const username,password = this.state
alert(`你输入的用户名是：$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>以上是关于React --- 收集表单数据(非受控组件和受控组件)的主要内容，如果未能解决你的问题，请参考以下文章