通过受控组件和非受控组件两种方式获取表单的值
受控组件
官方说明
React受控组件链接
1.声明
2.将value绑定到声明的对象中
3.绑定onChange改变触发的函数事件
import React, { Component } from 'react'
export default class App extends Component {
//在state中添加一个状态,作为表单元素的value值
state={
account:'',
pwd:''
isRich:true,
desc:''
}
//改变值的函数
handleAccount=(e)=>{
this.setState({
account:e.target.value
})
}
handlePwd=(e)=>{
this.setState({
pwd:e.target.value
})
}
//获取选择框的函数
handleIsRich=(e)=>{
this.setState({
isRich:e.target.checked
})
}
handleOnchage=(e)=>{
this.setState({
desc:e.target.value
})
}
//打印表单的值
getValue=()=>{
console.log(this.state);
}
render() {
return (
<div>
<div className="container">
<br />
//给表单元素绑定change事件,将表单元素的value值设置为对于的state的值
账号:<input type="text" onChange={this.handleAccount} value={this.state.account} name="account"/>
<br/>
密码:<input type="password" onChange={this.handlePwd} value={this.state.pwd} name="pwd"/>
选中与否:<input type="checkbox" checked={this.state.isRich} onChange= {this.handleIsRich}/>
描述:<input type="textarea" value={this.state.desc} onChange={this.handleOnchage} />
//点击获取到表单的值
<button onClick={this.getValue}>点击获取数据</button>
</div>
</div>
)
}
}
受控组件优化
import React, { Component } from 'react'
export default class App extends Component {
state={
account:'',
pwd:'',
isRich:true,
desc:''
}
handleOnchage=(e)=>{
//获取输入框的名字
const name=e.target.name;
//获取输入框的类型
const type=e.target.type;
//定义一个变量存值
let value=''
//判断输入框的类型是否为checkbox
if(type==='checkbox'){
//checkbox的值获取方式
value=e.target.checked
}else{
//其他类型的值获取方式
value=e.target.value
}
//设置state中属性的值
this.setState({
[name]:value
})
}
// 打印数据
getValue=()=>{
console.log(this.state);
}
render() {
return (
<div>
<div className="container">
我是一个类组件
<br />
文本类型:<input type="text" onChange={this.handleOnchage} value={this.state.account} name="account"/>
<br/>
密码类型:<input type="password" onChange={this.handleOnchage} value={this.state.pwd} name="pwd"/>
复选框:<input type="checkbox" checked={this.state.isRich} onChange= {this.handleOnchage} name="isRich" />
文本域:<input type="textarea" value={this.state.desc} onChange={this.handleOnchage} name="desc" />
<button onClick={this.getValue}>点击获取数据</button>
</div>
</div>
)
}
}
非受控组件
三个步骤,
1创建引用,
2通过ref绑定到元素中
3,获取表单的值
代码示例
import React, { Component } from 'react'
export default class App extends Component {
//非受控表单方法
constructor(){
super()
//1创建引用
this.accountRef=React.createRef()
this.pwdRef=React.createRef()
this.isRichRef=React.createRef()
}
getValue=()=>{
//3获取表单的值
console.log(
this.accountRef.current.value,
this.pwdRef.current.value,
this.isRichRef.current.checked
);
}
render() {
return (
<div>
<div className="container">
//2. 绑定引用到 元素中
文本类型:<input type="text" ref={this.accountRef} autoComplete="off"/>
密码类型:<input type="password" ref={this.pwdRef}/>
复选框:<input type="checkbox" ref={this.isRichRef} />
文本域:<input type="textarea" />
<button onClick={this.getValue}>点击获取数据</button>
</div>
</div>
)
}
}
受控组件适用于大多数场景
非受控组件只适合表单提交等不用校验的情况下使用