高阶函数

最新推荐文章于 2022-09-07 14:11:46 发布

duansamve

最新推荐文章于 2022-09-07 14:11:46 发布

阅读量190

点赞数

分类专栏： React 文章标签： reactjs

本文链接：https://blog.youkuaiyun.com/duansamve/article/details/116400580

版权

React 专栏收录该内容

72 篇文章

订阅专栏

什么叫高阶函数？

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

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

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

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

实例：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>
    <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>
    <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
    <title>Document</title>
</head>

<body>
    <div id="app"></div>
    <script type="text/babel">
        class Demo 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;
                console.log("你输入的用户名是：" + username + ", 密码是：" + password);
            }

            render(){
                return (<form onSubmit={this.handleSubmit}>
                    用户名：<input type="text" name="username" onChange={this.saveFormData("username")}/>
                    密码： <input type="text" name="password" onChange={this.saveFormData("password")}/>
                    <button>提交</button>             
                </form>)
            }     
        }
 
        ReactDOM.render(<Demo/>, document.getElementById("app"))
    </script>
</body>

</html>

或普通写法

        class Demo extends React.Component{
            state = {
                username: "",
                password: ""
            }

            saveFormData = (dataType, event) => {    
                this.setState({
                        [dataType]: event.target.value,
                })
            }

            handleSubmit = event => {
                event.preventDefault();
                const {username, password} = this.state;
                console.log("你输入的用户名是：" + username + ", 密码是：" + password);
            }

            render(){
                return (<form onSubmit={this.handleSubmit}>
                    用户名：<input type="text" name="username" onChange={event => this.saveFormData("username", event)}/>
                    密码： <input type="text" name="password" onChange={event => this.saveFormData("password", event)}/>
                    <button>提交</button>             
                </form>)
            }     
        }