Higher order functions & Currization

Higher-order function: A function is a higher-order function if it is a composite of either of the following two specifications.

  1. If A function takes A function, then A can be called A higher-order function
  2. A is A higher-order function if the return value of the call is still A function.

Common higher-order functions include Promise, setTimeout, arr.map, etc

Corrification of a function: a form of function encoding in which parameters are received multiple times and then processed uniformly by calling a function.

<! DOCTYPEhtml>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="Width = device - width, initial - scale = 1.0">
    <title>Document</title>
</head>
<body>
    <! -- Get the container ready -->
    <div id="test"></div>
    <! Import dependencies, import dependencies, must follow this step -->
    <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>
    
    <! -- JSX syntax is parsed with Babel
    <script type="text/babel">
        class Login extends React.Component{
            /* Higher-order functions: a function is a higher-order function if it is a composite of either of the following two specifications. If A function takes A function, then A can be called A higher-order function. A is A higher-order function if the return value of the call is still A function. Common higher-order functions include: Promise, setTimeout, arr.map and other functions: the function encoding form of receiving parameters for many times and finally processing uniformly is realized by calling the function and returning the function. * /
            // Initialization state
            state={
                username:' '.password:' ',}// As input maintenance state is controlled component ref has performance defects recommend using controlled component
            handleSubmit=() = >{
                event.preventDefault()
                console.log('this'.this)
                const {username,password} = this.state
                console.log('The username is${username}, the password is${password}`)}SaveFormData is called when onChange is followed by this.saveFormData
            SaveFormData ('username') is the return value of saveFormData
            saveFormData = (type) = >{
                console.log('type',type)
                return (e) = >{
                    console.log('e',e)
                    this.setState({[type]:e.target.value})
                }
            }
            // userNameChange=(e)=>{
            // console.log(e.target.value);
            // this.setState({username:e.target.value})
            // }
            // passwordChange=(e)=>{
            // console.log(e.target.value);
            // this.setState({password:e.target.value})
            // }
            render(){
                return(
                    <form onSubmit={this.handleSubmit}>The user name<input onChange={this.saveFormData('username')} type="text" name="username"/>password<input onChange={this.saveFormData('password')} type="password" name="password"/>
                        <button>The login</button>
                    </form>
                )
            }
        }

        ReactDOM.render(<Login/>.document.getElementById('test'))
    </script>
</body>
</html>
Copy the code

Goose suit roast can be solved without the use of creosote

<! DOCTYPEhtml>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="Width = device - width, initial - scale = 1.0">
    <title>Document</title>
</head>
<body>
    <! -- Get the container ready -->
    <div id="test"></div>
    <! Import dependencies, import dependencies, must follow this step -->
    <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>
    
    <! -- JSX syntax is parsed with Babel
    <script type="text/babel">
        class Login extends React.Component{
            /* Higher-order functions: a function is a higher-order function if it is a composite of either of the following two specifications. If A function takes A function, then A can be called A higher-order function. A is A higher-order function if the return value of the call is still A function. Common higher-order functions include: Promise, setTimeout, arr.map and other functions: the function encoding form of receiving parameters for many times and finally processing uniformly is realized by calling the function and returning the function. * /
            // Initialization state
            state={
                username:' '.password:' ',}// As input maintenance state is controlled component ref has performance defects recommend using controlled component
            handleSubmit=() = >{
                event.preventDefault()
                console.log('this'.this)
                const {username,password} = this.state
                console.log('The username is${username}, the password is${password}`)}SaveFormData is called when onChange is followed by this.saveFormData
            SaveFormData ('username') is the return value of saveFormData
            saveFormData = (type,event) = >{
                // Currie
                // console.log('type',type)
                // return (e)=>{
                // console.log('e',e)
                // this.setState({[type]:e.target.value})
                // }

                // Do not use cremation
                this.setState({[type]:event.target.value})

            }
            // userNameChange=(e)=>{
            // console.log(e.target.value);
            // this.setState({username:e.target.value})
            // }
            // passwordChange=(e)=>{
            // console.log(e.target.value);
            // this.setState({password:e.target.value})
            // }
            render(){
                return(
                    // <form onSubmit={this.handleSubmit}>
                    // username 
                    
                     
                    // </form>
                    // Different currization ways
                    <form onSubmit={this.handleSubmit}>The user name<input onChange={event= >This.saveformdata ('username',event)} type="text" name="username"/> Password<input onChange={event= >this.saveFormData('password',event)} type="password" name="password"/>
                        <button>The login</button>
                    </form>
                )
            }
        }

        ReactDOM.render(<Login/>.document.getElementById('test'))
    </script>
</body>
</html>
Copy the code