需求：
??定義一個包含表單的組件
?? 輸入用戶名密碼后, 點擊登錄提示輸入信息

1、包含表單的組件分類

1.1、受控組件

??受控組件通過event.target獲取對應的DOM節點，event.target.value獲取節點的值。 通過這種方式實現，類似于vue的雙向數據綁定，input 的值 改變了，對應屬性也改變；屬性值 改變了， input的值也改變。建議使用受控組件，因為非受控組件有對ref的使用，最好不要過渡使用ref。

    //1、創建組件
    class Demo extends React.Component {
        //初始化狀態
        state = ({
            userName: '', pwd: ''
        })
        saveUserName = (event) => {
            //    通過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(`用戶名${userName},密碼${pwd}`);
        }

        render() {
            return (
                <form onSubmit={this.handleSubmit}>
                    用戶名：<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'))

??對上述代碼逐步進行優化：

方法1：高階函數—函數珂里化

??高階函數：如果一個函數符合下面2個規范中的任何一個，那么函數就是高階函數：

1. 若A函數，接收的參數是一個函數，那么A就可以稱之為高階函數
2. 若A函數，調用的返回值依然是一個函數，那么A就可以稱之為高階函數

??常見的高階函數有：Promise、 setTimeout、arr.map()…

?? 函數的珂里化：通過函數調用繼續返回調用函數的方式，實現多次接收參數最后統一處理的函數編碼形式。

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

        render() {
            return (
                <form onSubmit={this.handleSubmit}>
                    用戶名：<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}>
                    用戶名：<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}>
                    用戶名：<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、非受控組件

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

 //創建組件
    class Demo 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" id=""/>
                    密碼：<input ref={c => this.password = c} type="password" name="password" id=""/>
                    <button>登錄</button>
                </form>
            )
        }
    }

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