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

Posted 2022-07-11 胖鹅68

文章目录

• 一、问题描述
• 二、类似代码解决办法
• • 2.1 高阶函数_函数柯里化
  • 2.2 箭头函数（传递不同参数）

一、问题描述

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

//创建组件
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>
		)