一. 非受控組件，現用現?。ㄋ斜韱沃休斎肟?，選擇框的值）

class Login extends React.Component{
                handleSubmit = (event)=>{
                    event.preventDefault(); //阻止表單的提交事件  阻止默認事件
                   
                    const {username,userpwd} = this
                    console.log(username.value,"----",userpwd.value);
                    return false;
                }
                render(){
                    return (
                        <form action="http://www.smokestackpainting.com" onSubmit={this.handleSubmit}>
                           用戶名： <input ref={c=>this.username=c} type="text" />
                           密碼：  <input  ref={c=>this.userpwd=c} type="password" />
                           <button>登陸</button>
                        </form>
                    )
                }
            }

二. 受控組件: 隨著值的改變，自動存儲到state中，需要用時，直接到this.state中取

class Login extends React.Component{
                //初始化狀態
                state = {
                    username:'',
                    userpwd :''
                }
                //保存用戶名到狀態中
                saveUsername = (event)=>{
                    //console.log(event.target.value);
                    this.setState({username:event.target.value})
                }
                saveUserpwd = (event)=>{
                    //console.log(event.target.value);
                    this.setState({userpwd:event.target.value})
                }
                handleSubmit = (event)=>{
                    event.preventDefault(); //阻止表單的提交事件  阻止默認事件
                    const {username,userpwd} = this.state
                    console.log(`你的用戶名是：${username}, 密碼是: ${userpwd}`);
                }
                render(){
                    return (
                        <form action="http://www.smokestackpainting.com" onSubmit={this.handleSubmit}>
                           用戶名： <input onChange={this.saveUsername} type="text" />
                           密碼：  <input  onChange={this.saveUserpwd} type="password" />
                           <button>登陸</button>
                        </form>
                    )
                }
            }