React 入门必备【第二关】React面向组件编程之高阶函数与函数柯里化（选看）

最新推荐文章于 2024-10-31 13:50:06 发布

Queen_sy

最新推荐文章于 2024-10-31 13:50:06 发布

阅读量151

点赞数

文章标签： react.js 前端前端框架

本文链接：https://blog.csdn.net/Queen_sy/article/details/132101823

版权

目的：增加代码复用性

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

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

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

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

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

含义：saveFormData作为onChange的回调

onChange = {this.saveFormData}

通过参数保存表单数据

含义：saveFormData的返回值作为onChange的回调

改为：

onChange = {this.saveFormData('name')}

定义回调函数保存表单数据到状态中

this.setState({name:event.target.value});

改为：

this.setState({[dataType]:event.target.value});

完整版代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id = "div">

    </div>

</body>
<!-- 引入依赖 ,引入的时候，必须就按照这个步骤-->
<script src="../React-js/react.development.js" type="text/javascript"></script>
<script src="../React-js/react-dom.development.js" type="text/javascript"></script>

<script src="../React-js/babel.min.js"></script>

<!--引入对于组件标签的限制-->
<script src="../React-js/prop-types.js"></script>

<script type="text/babel">

/*
    高级函数：
    1.如果函数的参数是函数
    2.如果函数返回一个函数
    函数的珂里化：
    通过函数调用继续返回函数的方式，实现多次接收参数最后统一处理的函数编码形式
*/

    class Login extends React.Component{

        login = (event) =>{
            event.preventDefault(); //阻止表单提交
            console.log(this.name.value);
            console.log(this.pwd.value);
        }

        state = {name:"",pwd:""};

        saveFormdata = (dataType) =>{
            return (event) => {
                this.setState({[dataType]:event.target.value});
            }
        }


        //因为事件中必须是一个函数，所以返回的也是一个函数，这样就符合规范了
        render() {
            return (
                <form action="http://www.baidu.com" >
                    用户名：<input onChange = {this.saveFormdata('name')} type = "text" name ="username"/>
                    {/*直接调用回调函数也是可以的：将数据传递过去就可以*/}
                    用户名：<input onChange = {(event)=>{this.saveFormdata('name',event)}} type = "text" name ="username"/>
                    密码<input onChange = {this.saveFormdata('pwd')} type = "password" name ="password"/>
                    <button>登录</button>
                </form>
            )
        }
    }

    ReactDOM.render(<Login />,document.getElementById("div"));
</script>
</html>