6.收集表单数据

在大多数情况下，我们推荐使用受控组件来处理表单数据。在一个受控组件中，表单数据是由 React 组件来管理的。另一种替代方案是使用非受控组件，这时表单数据将交由 DOM 节点来处理。

1.非受控组件（即存即用）

//1.创建组件
        class Login extends React.Component {
            handleSubmit=(event)=>{
                event.preventDefault()//阻止表单提交
                const{username,password} = this
                alert(`你输入的用户名是:${username.value}你是入的密码是:${password.value}`)
            }
            render(){
                return(
                    <form  onSubmit={this.handleSubmit}>
                        用户名：<input ref={c=>this.username=c}type="text" name = "username"/>
                        密码：<input ref={c=>this.password=c}type="text" name = "password"/>
                        <button>登录</button>
                    </form>
                )
            }
        }
        //2.渲染
        ReactDOM.render(<Login />, document.getElementById('test'))

2.受控组件（将表单信息存入state中，再从state中取用）

//1.创建组件
        class Login extends React.Component {
            //初始化状态
            state = {
                username:"",//用户名
                password:""//密码
            }
            //保存用户名到状态中
            saveUsername= (event)=>{
                this.setState({username:event.target.value})
                
            }
            //保存密码
            savePassword= (event)=>{
                this.setState({password:event.target.value})
                
            }
            handleSubmit=(event)=>{
                event.preventDefault()//阻止表单提交
                const{username,password} = this.state
                alert(`你输入的用户名是:${username}你是入的密码是:${password}`)
            }
            render(){
                return(
                    <form  onSubmit={this.handleSubmit}>
                        用户名：<input  onChange = {this.saveUsername} type="text" name = "username"/>
                        密码：<input onChange = {this.savePassword} type="text" name = "password"/>
                        <button>登录</button>
                    </form>
                )
            }
        }
        //2.渲染
        ReactDOM.render(<Login />, document.getElementById('test'))

3. 柯里化

概念：
高阶函数：
1. 若A函数，接受的参数是一个函数，那么A就可以成为高阶函数
2. 若A函数，调用的返回值依然是一个函数，那么A就可以称之为高阶函数
例如：Promise、setTimeout、arr.map()
函数柯里化：通过函数调用继续返回函数

上述问题用柯里化表达可减少函数的定义量

        //1.创建组件
        class Login 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
                alert(`你输入的用户名是:${username}你是入的密码是:${password}`)
            }
            render() {
                return (
                    <form onSubmit={this.handleSubmit}>
                        用户名：<input onChange={this.saveFormData('username')} type="text" name="username" />
                        密码：<input onChange={this.saveFormData('password')} type="text" name="password" />
                        <button>登录</button>
                    </form>
                )
            }
        }
        //2.渲染
        ReactDOM.render(<Login />, document.getElementById('test'))

4. 另一种表达

标签中的onChange属性需要接收一个函数，如果对该函数传参，则含义就变为了调用该函数，onChange属性无法正常接收，柯里化方式是将该函数的返回值赋给onChange，既实现了传参，又传递了函数。
当然，我们也可以直接在标签中写入一个函数，来接收参数，表达如下：

    //1.创建组件
    class Login extends React.Component {
        //初始化状态
        state = {
            username: "",//用户名
            password: ""//密码
        }
        //保存表单数据到状态中
        saveFormData = (datatype,event) => {
                this.setState({[datatype]:event.target.value})
        }
        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="text" name="password" />
                    <button>登录</button>
                </form>
            )
        }
    }
    //2.渲染
    ReactDOM.render(<Login />, document.getElementById('test'))