其他分享
首页 > 其他分享> > react: 高阶函数及函数柯里化

react: 高阶函数及函数柯里化

作者:互联网

1.高阶函数

  1. 若A函数,接收的参数是一个函数,那么A就可以称之为高阶函数。
  2. 若A函数,调用的返回值依然是一个函数,那么A就可以称之为高阶函数。
  3. 常见的高阶函数有:Promise、setTimeout、arr.map()等等

2. 函数的柯里化

2.1 示例

下面表单中的所有属性的保存都通过一个saveFormData 即可实现
saveFormData接收一个参数,并返回了一个函数,这个返回的函数作为onChange事件的回调函数
回调函数参数又是事件发生的元素节点
这样就能同时获取到需要保存的属性名,通过事件发生的元素节点获取对应的value
达到保存表单数据的效果

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>
				)
			}
		}
		//渲染组件
		ReactDOM.render(<Login/>,document.getElementById('test'))

标签:saveFormData,函数,表单,react,柯里化,password,高阶,event
来源: https://www.cnblogs.com/virgosnail/p/15631206.html