react input受控组件——函数柯里化

Posted 胖鹅68

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了react input受控组件——函数柯里化相关的知识,希望对你有一定的参考价值。

文章目录

一、问题描述

在需要用户大量录入的界面中,如果针对每个受控组件,都定义一个状态管理函数,那“相似代码”会非常多,而且工作量非常大,维护起来非常不方便

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

二、类似代码解决办法

2.1 高阶函数_函数柯里化

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="password" name="password"/>
				<button>登录</button>
			</form>
		)
	

2.2 箭头函数(传递不同参数)

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

以上是关于react input受控组件——函数柯里化的主要内容,如果未能解决你的问题,请参考以下文章