react学习——13react高阶函数_函数柯里化

1、高阶函数柯里化实现

javascript 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <!--    移动端适配-->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>1_高阶函数_函数柯里化.html</title>
</head>
<body>
<!--准备一个容器-->
<div id="root"></div>
<!--引入react核心库-->
<script type="text/javascript" src="../js/react.development16.3.1.js"></script>
<!--引入react-dom.js库,用于支持react操作DOM-->
<script type="text/javascript" src="../js/react-dom.development16.3.1.js"></script>
<!--引入babel，用于jsx的转换jsx-->
<script type="text/javascript" src="../js/babel.min.js"></script>
<script type="text/babel">/*此处一定要写babel*/
    class Demo extends React.Component{
        //#region
        /*
            高阶函数：如果一个函数符合下面2个规范中的任何一个，那么这个函数就是一个高阶函数
                1.若A函数，接收的参数是一个函数，那么A就是一个高阶函数
                2.若A函数，调用的返回值是一个函数，那么A就是一个高阶函数
                常见的高阶函数有：
                promise、setTimeout、arr.map()等等
            函数的柯里化：通过函数调用继续返回函数的方式，实现多次接收参数最后统一的函数编码形式。
         */
        //#endregion

        state = {
            username:'',//用户名
            password:''//密码
        }
        //保存数据
        saveFormData=(type)=>{
            return (event)=>{
                console.log("=="+type,event.target.value)
                this.setState({
                    [type]: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(<Demo/>,document.getElementById('root'))
</script>
</body>
</html>

2、不用柯里化实现

javascript 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <!--    移动端适配-->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>2_不用柯里化实现.html</title>
</head>
<body>
<!--准备一个容器-->
<div id="root"></div>
<!--引入react核心库-->
<script type="text/javascript" src="../js/react.development16.3.1.js"></script>
<!--引入react-dom.js库,用于支持react操作DOM-->
<script type="text/javascript" src="../js/react-dom.development16.3.1.js"></script>
<!--引入babel，用于jsx的转换jsx-->
<script type="text/javascript" src="../js/babel.min.js"></script>
<script type="text/babel">/*此处一定要写babel*/
    class Demo extends React.Component{
        //#region
        /*
            高阶函数：如果一个函数符合下面2个规范中的任何一个，那么这个函数就是一个高阶函数
                1.若A函数，接收的参数是一个函数，那么A就是一个高阶函数
                2.若A函数，调用的返回值是一个函数，那么A就是一个高阶函数
                常见的高阶函数有：
                promise、setTimeout、arr.map()等等
            函数的柯里化：通过函数调用继续返回函数的方式，实现多次接收参数最后统一的函数编码形式。
         */
        //#endregion

        state = {
            username:'',//用户名
            password:''//密码
        }
        //保存数据
        saveFormData=(type,event)=>{
            this.setState({
                [type]: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>
                )
        }
    }
    ReactDOM.render(<Demo/>,document.getElementById('root'))
</script>
</body>
</html>