非受控元件：現用現取

　　　 　 // 建立元件
        class Login extends React.Component{
            handleSubmit = (event) => {
                event.preventDefault()
                alert(`使用者名稱是${this.username.value}，密碼是${this.password.value}`)
            }
            render() {
                return (
                    
 
<form onSubmit={this.handleSubmit}>
                        使用者名稱：<input type="text" ref={c => this.username = c} name="username"/>
                        密碼：<input type="password" ref={c => this.password = c} name="password"/>
                        <button>登入</button>
                    </form>
                )
            }
        }
        ReactDOM.render(
 
<Login/>, document.getElementById('test'))

受控元件：類似Vue的雙向繫結，隨著資料的變化維護到狀態中

　　　 　// 建立元件
        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 type="text" onChange={this.saveUserName} name="username"/>
                        密碼：<input type="password" onChange={this.savePassword} name="password"/>
                        <button>登入</button>
                    </form>
                )
            }
        }
        ReactDOM.render(<Login/>, document.getElementById('test'))

由於 React 官方建議 儘量少用 ref， 所以我們多寫 受控元件