一，非受控组件
表单中的数据在需要的时候“现用现取”（通过ref获得到节点，进而访问到value）
- 受控指的是受到状态state的控制
- 使用ref属性
<body>
<div id="test"></div>
<script type="text/babel">
class Demo extends React.Component {
render(){
return (
<form onSubmit = {this.handleLogin}>
姓名:<input type='text' ref={curNode => this.userNameNode = curNode}/>
密码：<input type='password' ref = {curNode => this.passwordNode = curNode}/>
<button>提交</button>
</form>
)
}
handleLogin = event=>{
event.preventDefault()
console.log(this)
const {userNameNode, passwordNode} = this
alert(`姓名为${userNameNode.value},密码为${passwordNode.value}`)
}
}
ReactDOM.render(<Demo/>, document.getElementById('test'))
</script>
</body>
</html>
二，受控组件
表单中输入类DOM（input checkbox select等）随着用户的输入，将值收集到state中，那么就成为受控组件
- 给A元素绑定事件，拿的是A元素
<body>
<div id="test"></div>
<script type="text/babel">
class Demo extends React.Component {
state = {
userName: '',
password: ''
}
render(){
return (
<form onSubmit = {this.handleLogin}>
姓名:<input type='text' onChange={this.saveUserName} />
密码：<input type='password' onChange={this.savePassword} />
<button>提交</button>
</form>
)
}
// 保存用户名到state中
saveUserName = event=>{
this.setState({userName: event.target.value})
}
// 保存密码到state中
savePassword = event=>{
this.setState({password: event.target.value})
}
handleLogin = event=>{
event.preventDefault()
console.log(this)
const {userName, password} = this.state
alert(`姓名为${userName},密码为${password}`)
}
}
ReactDOM.render(<Demo/>, document.getElementById('test'))
</script>
</body>
三，小知识点
-
onChange方法监控input输入框改变
-
event.target是发生事件的事件源，每次在输入框中输入内容，就会获取到事件源
什么时候不使用ref？
发生事件的事件源和获取事件是同一个，使用event.target可以获取到元素上的属性，此时不使用ref（比如给A绑定事件，恰巧拿的是A元素上的属性）
当给按钮B绑定事件，获取输入框A中的属性，此时需要借助ref实现
<div id="test"></div>
<script type="text/babel">
class Demo extends React.Component {
render(){
return (
<form onSubmit = {this.handleLogin}>
姓名:<input type='text' onChange={this.demo} />
密码：<input type='password' />
<button>提交</button>
</form>
)
}
demo(event){
console.log(event.target)
}
handleLogin = event=>{
event.preventDefault()
console.log(this)
}
}
ReactDOM.render(<Demo/>, document.getElementById('test'))