12组件柯里化(高阶函数)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://unpkg.com/react@16/umd/react.development.js"></script>
    <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
    <script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
</head>
<body>
<div id="test"></div>
</body>
</html>
<script type="text/babel">
    /*
    *高阶函数: 如果一个函数符合下列的任意一个条件就可称之为高阶函数
    * 1..若A函数,接受的参数是一个函数,那么A就可以称之为高阶函数
    * 2,若A函数,调用的返回值依然是一个函数,那么A就可以称之为高阶函数
    *
    * */
    class Login extends React.Component{
        state={
            username:'',
            password:''
        }
        saveFormData=(dataType)=>{
            return e=>{
                // console.log(e.target.value)
                this.setState({
                    [dataType]:e.target.value
                })
            }
        }
        handleSubmit=(e)=>{
            e.preventDefault()
        //     const {username,password} =this.state
        //
        //     alert(`你输入的账号是${username},你输入的密码是${password}`)
         }
        render() {
            return(
                <form action="http://atguigu.com" onSubmit={this.handleSubmit}>
                    用户名: <input type="text" name="username" onChange={this.saveFormData('username')} />
                    密码  : <input type="password" name="password" onChange={this.saveFormData('password')}/>
                    <button>登录</button>
                </form>
            )
        }
    }
    ReactDOM.render(<Login/>,test)
</script>
posted @ 2022-07-06 10:14 大宁0615 阅读(25) 评论(0) 收藏举报
刷新页面返回顶部