使用函数柯里化（高阶函数）处理多个input

有这样一个添加个人信息的form表单，点击确定的时候，在控制台输出他所填写的内容（以react为例）

要是按照我刚写代码的时候，肯定是一个输入框一个方法，然后在进行赋值；万一输入框多了那就真tm难受
我们可以通过调用一个函数传不同的参数来进行优化

函数柯里化的方式

import React, {  Component } from 'react'

export default class Demo extends Component {

    state = {
        name: '',
        mobile: '',
        age: '',
        sex: '',
        address: ''
    }
   
   //点击提交
    handleSubmit = (e) => {
        e.preventDefault()
        const { name, mobile, age, sex, address } = this.state
        console.log(name, mobile, age, sex, address)
    }
	
	//保存数据
    saveFormData = (type) => {
        // console.log(e.target.value)
        // console.log(type)
        return (e) => {
            this.setState({
                [type]: e.target.value
            })
        }
        
    }

    render() {
        return (
            <form style={{display:'flex', flexDirection: 'column'}} action="https://www.baidu.com" onSubmit={this.handleSubmit}>
                <h1>个人信息填写</h1>
                姓名：<input onChange={this.saveFormData('name')} type="text" style={{width: '190px'}} />
                手机：<input onChange={this.saveFormData('mobile')} type="text" style={{width: '190px'}} />
                年龄：<input onChange={this.saveFormData('age')} type="text" style={{width: '190px'}} />
                性别：<input onChange={this.saveFormData('sex')} type="text" style={{width: '190px'}} />
                地址：<input onChange={this.saveFormData('address')} type="text" style={{width: '190px'}} />
                <button style={{width: '100px', margin: '20px 0'}}>点击提交</button>
            </form>
        )
    }
}

上面代码中，真正作为onChange作为回调的不是saveFormData ，而是saveFormData它返回的那个函数，输入的时候我们真正调的是return的那个函数；所以我们能在return的那个函数中拿到他的原生事件对象

除了函数的柯里化，也可以使用箭头函数的形式来改写

render() {
        return (
            <form style={{display:'flex', flexDirection: 'column'}} action="https://www.baidu.com" onSubmit={this.handleSubmit}>
                <h1>个人信息填写</h1>
                姓名：<input onChange={(e) => this.saveFormData(e,'name')} type="text" style={{width: '190px'}} />
                手机：<input onChange={(e) => this.saveFormData(e,'mobile')} type="text" style={{width: '190px'}} />
                年龄：<input onChange={(e) => this.saveFormData(e,'age')} type="text" style={{width: '190px'}} />
                性别：<input onChange={(e) => this.saveFormData(e,'sex')} type="text" style={{width: '190px'}} />
                地址：<input onChange={(e) => this.saveFormData(e,'address')} type="text" style={{width: '190px'}} />
                <button style={{width: '100px', margin: '20px 0'}}>点击提交</button>
            </form>
        )
    }

saveFormData = (e, type) => {
        // console.log(e.target.value)
        // console.log(type)
        this.setState({
            [type]: e.target.value
        })
        
    }

小程序无非就是多传入一个参数

vue版本（不展示函数柯里化的方式）

这样就不用写n个input的处理方法了