在練習表單處理這塊，如果在不依賴套件的狀況下，可以有兩種方式來控制表單欄位，那麼今天就來介紹一下controlled component 和uncontrolled component

兩者之間的最大的差異就在於component state是否由React控制

• controlled component: 指的是透過useState來保存資料，setState來設置表單 
• uncontrolled component: 指的是input並沒有綁定state，單純透過ref來取值 ，跟傳統作法一樣

兩者都可以達到取值的目的

以下為一個簡單的登入表單

先用state存放帳號和密碼，然後透過將state的值賦予input，當用戶輸入資料的時候就會觸發onChange function ，呼叫setState來更新欄位資料，類似vue的 vue-model雙向綁定的概念

class FormExample extends Component{
    constructor(){
        super()
        this.state = {
            name:'',
            password:''
        }
    }
    login = () =>{
        const {name, password} = this.state
        console.log('name',name,'password',password)
    }
    render(){ 
        const { name, password } = this.state
        return(
            <Fragment>
                <ul>
                    <li>
                        <label>username</label>
                        <input 
                        type = "text" 
                        value = { name }
                        onChange = { (e) => this.setState({name: e.target.value})} 
                        />
                    </li>
                    <li>
                        <label>password</label>
                        <input 
                        type = "password" 
                        value = { password }
                        onChange={(e) => { this.setState({password: e.target.value})}}
                        />
                    </li>
                </ul>
                <button onClick={this.login}>login</button>
            </Fragment>
        )
    }
    

以下是用createRef來取得input本身，再利用current.value取的input的value 操作表單 ，跟傳統的document.getElementsByTagName("input")[0].value來取值的概念是一樣的

  class FormRefExample extends Component{
    constructor(){
        super()
        this.nameRef = createRef()
    }
    login = () =>{
        console.log('value',this.nameRef.current.value)
    }
    render(){
        return(
            <Fragment>
                <input type="text" ref={this.nameRef} />
                <button onClick={this.login}>登入</button>
            </Fragment>
        )
    }
}

看來看去 ，好像第二種寫法uncontrolled component更簡單不是嗎?但是當需要控制的DOM數量一多， 需要大量手動的去操作DOM作業量就變得更繁重， 而controlled component 是由資料數據來更動畫面，雖然一開始的資料綁定流程比較繁瑣，但綁定完畢之後只要專注在資料處理即可，所以儘可能地使用controlled component吧！