需求：
??定義一個(gè)包含表單的組件
?? 輸入用戶(hù)名密碼后, 點(diǎn)擊登錄提示輸入信息

1、包含表單的組件分類(lèi)

1.1、受控組件

??受控組件通過(guò)event.target獲取對(duì)應(yīng)的DOM節(jié)點(diǎn)，event.target.value獲取節(jié)點(diǎn)的值。 通過(guò)這種方式實(shí)現(xiàn)，類(lèi)似于vue的雙向數(shù)據(jù)綁定，input 的值 改變了，對(duì)應(yīng)屬性也改變；屬性值 改變了， input的值也改變。建議使用受控組件，因?yàn)榉鞘芸亟M件有對(duì)ref的使用，最好不要過(guò)渡使用ref。

    //1、創(chuàng)建組件
    class Demo extends React.Component {
        //初始化狀態(tài)
        state = ({
            userName: '', pwd: ''
        })
        saveUserName = (event) => {
            //    通過(guò)event.target獲取dom
            this.setState({
                userName: event.target.value
            })

        }
        savePwd = (event) => {
            this.setState({
                pwd: event.target.value
            })
        }
        handleSubmit = (event) => {
            event.preventDefault();//阻止表單提交
            const {userName, pwd} = this.state;
            alert(`用戶(hù)名${userName},密碼${pwd}`);
        }

        render() {
            return (
                <form onSubmit={this.handleSubmit}>
                    用戶(hù)名：<input onChange={this.saveUserName} type="text" name="userName" id=""/>
                    密碼：<input onChange={this.savePwd} type="password" name="password" id=""/>
                    <button>登錄</button>
                </form>
            )
        }
    }
    //2、渲染虛擬DOM
    ReactDOM.render(<Demo/>, document.getElementById('test'))

??對(duì)上述代碼逐步進(jìn)行優(yōu)化：

方法1：高階函數(shù)—函數(shù)珂里化

??高階函數(shù)：如果一個(gè)函數(shù)符合下面2個(gè)規(guī)范中的任何一個(gè)，那么函數(shù)就是高階函數(shù)：

1. 若A函數(shù)，接收的參數(shù)是一個(gè)函數(shù)，那么A就可以稱(chēng)之為高階函數(shù)
2. 若A函數(shù)，調(diào)用的返回值依然是一個(gè)函數(shù)，那么A就可以稱(chēng)之為高階函數(shù)

??常見(jiàn)的高階函數(shù)有：Promise、 setTimeout、arr.map()…

?? 函數(shù)的珂里化：通過(guò)函數(shù)調(diào)用繼續(xù)返回調(diào)用函數(shù)的方式，實(shí)現(xiàn)多次接收參數(shù)最后統(tǒng)一處理的函數(shù)編碼形式。

//1、創(chuàng)建組件
    class Demo extends React.Component {
        //初始化狀態(tài)
        state = ({
            userName: '', pwd: ''
        })
        saveFormDate = (dataType) => {
            //高階函數(shù)-函數(shù)珂里化
            return (event) => {
                console.log(event.target.value);
                this.setState({
                    [dataType]: event.target.value
                })
            }
        }
        handleSubmit = (event) => {
            event.preventDefault();//阻止表單提交
            const {userName, pwd} = this.state;
            alert(`用戶(hù)名${userName},密碼${pwd}`);
        }

        render() {
            return (
                <form onSubmit={this.handleSubmit}>
                    用戶(hù)名：<input onChange={this.saveFormDate('userName')} type="text" name="userName" id=""/>
                    密碼：<input onChange={this.saveFormDate('pwd')} type="password" name="password" id=""/>
                    <button>登錄</button>
                </form>
            )
        }
    }

    //2、渲染虛擬DOM
    ReactDOM.render(<Demo/>, document.getElementById('test'))

方法2：不用珂里化的方法

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


render() {
            return (
                <form onSubmit={this.handleSubmit}>
                    用戶(hù)名：<input onChange={event => this.saveFormDate('userName', event)} type="text" name="userName"
                               id=""/>
                    密碼：<input onChange={event => this.saveFormDate('pwd', event)} type="password" name="password"
                              id=""/>
                    <button>登錄</button>
                </form>
            )
        }

方法3：使用自定義屬性data-xxx=‘xxxx’

saveFormDate = (event) => {
            let key=event.target.dataset.key
            this.setState({
                [key]: event.target.value
            })
        }

render() {
            return (
                <form onSubmit={this.handleSubmit}>
                    用戶(hù)名：<input data-key="userName" onChange={this.saveFormDate} type="text" name="userName"
                               id=""/>
                    密碼：<input data-key="pwd" onChange={this.saveFormDate} type="password" name="password"
                              id=""/>
                    <button>登錄</button>
                </form>
            )
        }

1.2、非受控組件

??通過(guò)ref去獲取表單DOM,然后通過(guò)DOM獲取表單的值，不是通過(guò)react事件去控制。

 //創(chuàng)建組件
    class Demo extends React.Component {
        handleSubmit = (event) => {
            event.preventDefault();//阻止表單提交
            const {userName, password} = this;
            alert(`用戶(hù)名${userName.value},密碼${password.value}`);
        }

        render() {
            return (
                <form  onSubmit={this.handleSubmit}>
                    用戶(hù)名：<input ref={c => this.userName = c} type="text" name="userName" id=""/>
                    密碼：<input ref={c => this.password = c} type="password" name="password" id=""/>
                    <button>登錄</button>
                </form>
            )
        }
    }

    ReactDOM.render(<Demo/>, document.getElementById('test'))