React学习笔记——在受控组件中使用函数柯里化

先来了解两个定义高阶函数和函数的柯里化

高阶函数：

如果一个函数符合下面2个规范中的任何一个，那该函数就是高阶函数。

1. 若A函数，接收的参数是一个函数，那么A就可以称之为高阶函数。

2. 若A函数，调用的返回值依然是一个函数，那么A就可以称之为高阶函数。

   常见的高阶函数有：Promise、setTimeout、arr.map()等等

函数的柯里化：

通过函数调用继续返回函数的方式，实现多次接收参数最后统一处理的函数编码形式。

代码：

    <div id="test"></div>
    <script type="text/javascript" src="../JS/react.development.js"></script>
    <script type="text/javascript" src="../JS/react-dom.development.js"></script>
    <script type="text/javascript" src="../JS/babel.min.js"></script>
    <script type="text/javascript" src="../JS/prop-types.js"></script>

    <script type="text/babel">

        class Login extends React.Component{
            // 初始化state状态
            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 action="http://www.atguigu.com" 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()即为函数柯里化的举例。