您好,欢迎访问代理记账网站
移动应用 微信公众号 联系我们

咨询热线 -

电话 15988168888

联系客服
  • 价格透明
  • 信息保密
  • 进度掌控
  • 售后无忧

React之收集表单数据

包含表单的组件分为受控组件与非受控组件,下面我们通过一个实例进行讲解。


实例

需求:定义一个包含表单的组件,输入用户名密码后,点击登录提示输入信息。

非受控组件

非受控组件,就是需要数据的时候现取现用。

// 创建组件
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="text" name="password"/>
                        <button>登录</button>
                    </form>
                )
            }        
 }

//渲染组件到页面
ReactDOM.render(<Login/>, document.getElementById('test'))

受控组件

受控组件就是把需要的数据保存在 state 中,之后要用的时候,直接从 state 中即可。

// 创建组件
class Login extends React.Component{
            // 初始化状态
            state = {
                username:'', //用户名
                password:'' //密码
            }
            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="text" name="password"/>
                        <button>登录</button>
                    </form>
                )
            }
        }

//渲染组件到页面
ReactDOM.render(<Login/>, document.getElementById('test'))

上面就是使用了受控组件,但是每个都使用不同的回调函数,当表单需要收集的东西变多的时候,就需要定义很多回调函数,这样代码看着就很冗余。下面我们通过一个函数完成所有回调函数。

// 创建组件
class Login extends React.Component{
            // 初始化状态
            state = {
                username:'', //用户名   
                password:'' //密码
            }
            saveFormData = (dataType)=>{
                return (event)=>{
                    this.setState({[dataType]:event.target.value})
                }
            }

            // 表单提交的回报
            handleSubmit = (event)=>{
                event.preventDefault() //阻止表单提交
                const {username, password} = this.state
                alert(`你输入的用户名是:${username},你输入的密码是:${password}`)
            }
            render(){
                return (
                    <form onSubmit={this.handleSubmit}>
                        用户名:<input onChange={this.saveFormData('username')} type="text" name="username"/>
                        密码:<input onChange={this.saveFormData('password')} type="text" name="password"/>
                        <button>登录</button>
                    </form>
                )
            }
        }

//渲染组件到页面
ReactDOM.render(<Login/>, document.getElementById('test'))

因为 onChange 需要一个回调函数,所以我们 return 一个函数,这里就要提到高阶函数与函数柯里化的概念。

高阶函数

  1. 若一个函数,接收的参数是一个函数,那么这个函数就可以被称为高阶函数。
  2. 若一个函数,调用的返回值依然是一个函数,那么这个就可以被称为高阶函数。

常见的高阶函数有:PromisesetTimeoutarr.map() 等等。

函数的柯里化

通过函数调用继续返回函数的方式,实现多次接收参数最后统一处理的函数编码形式,比如上面的 saveFormData

当然我们不使用函数的柯里化也可以解决这个问题。

// 创建组件
class Login extends React.Component{
            // 初始化状态
            state = {
                username:'', //用户名   
                password:'' //密码
            }
            saveFormData = (dataType, event)=>{
               	this.setState({[dataType]:event.target.value})
            }

            // 表单提交的回报
            handleSubmit = (event)=>{
                event.preventDefault() //阻止表单提交
                const {username, password} = this.state
                alert(`你输入的用户名是:${username},你输入的密码是:${password}`)
            }
            render(){
                return (
                    <form onSubmit={this.handleSubmit}>
                        用户名:<input onChange={event => this.saveFormData('username', event)} type="text" name="username"/>
                        密码:<input onChange={event => this.saveFormData('password', event)} type="text" name="password"/>
                        <button>登录</button>
                    </form>
                )
            }
        }

//渲染组件到页面
ReactDOM.render(<Login/>, document.getElementById('test'))

我们通过回传一个箭头函数来解决这个问题。


分享:

低价透明

统一报价,无隐形消费

金牌服务

一对一专属顾问7*24小时金牌服务

信息保密

个人信息安全有保障

售后无忧

服务出问题客服经理全程跟进