React学习(从零基础到精通)00010011

不用函数柯里化的实现

    <script type="text/babel">
        //#region 
            /*
                高阶函数:如果一个函数符合下面2个规范中的任何一个,那该函数就是高阶函数
                        1. 若A函数,接收的参数是一个函数,那么A就可以称之为高阶函数
                        2. 若A函数,调用的返回值依然是一个函数,那么A就可以称之为高阶函数
                        常用的高阶函数有:Promise,setTimeout,arr.map()等等

                函数的柯里化:通过函数调用继续返回函数的方式,实现多次接收参数最后统一处理的函数编码形式。
            */
        //#endRegion
        //创建组件
        class Login extends React.Component{
            //初始化状态
            state = {
                username:"",
                password:""
            }
            //保存表单数据到状态中
            saveFormData = (dataType,event)=>{
                this.setState({
                    [dataType]:event.target.value //注意这里的dataType要加[],这样才是取的变量不然就是字符串
                })
            }
            // 表单提交的回调
            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(<Login/>,document.getElementById("test"))
    </script>

 

上一篇:联想 Vibe Shot(Z90-7) 免recovery 获取ROOT权限 救砖 VIBEUI V3.1_1625


下一篇:mysql – 删除一个Crashed Innodb表