在學習React的表單時勢必先了解什么是 React的受控组件(controlled component)和非受控组件(uncontrolled component)。

在受控组件中，表單的數據資料是由 React 組件所處理。而非受控组件的表單的資料數據是由 DOM 本身所處理的。

非受控组件不在今天的記錄範圍中，今天要記錄的是如何在React受控组件(controlled component)中處理表單，也是前幾日實作Forms時碰到了一些問題，想要記錄下來。

當我們在處理表單的元素時像是 input、 select…
是根據使用者的輸入內容來更新數據資料，而在React中當資料數據被改變時，component 的 state 或 props 也會跟著做改變， setState() 也會做更新，而當 setState() 更新時component 的預設行為會重新 render。

如此在使用者對表單進行輸入資料，當資料中的值改變時，component會重新渲染表單，並更新 setState() ，像這樣一個輸入表單的 element，被 React 用這樣的方式來控制它的值，就被稱為「controlled component」。

在Forms的實作中

<input  type="text"  placeholder="Enter You Name"   onChange={inputEvent}  value={name} />

const inputEvent = (event)=>{       
   setName(event.target.value);
   };

在 input 的 onChange中指定一個inputEvent function,當使用者改變input中的值時會觸發onChange，就會執行inputEvent function，透過event.target.value取值指定給setName( )。

當在input中輸入或改變值時，event.target.value會得到一個新值，此時資料數據被改變，component 的 state 也會跟著做改變， setState() 會更新，會Update一個新的值給setName，(setName是Update後的值)，然後Update後的的setName會把值給name(name是當前的值，就是更新後的值)

const onSubmit = () =>{
        setFullName(name);
    };
    

當button被觸發執行onSubmit function，會將name(當前的值)指定給setFullName，最後setFullName中的值經由 setState()更新，最後將更新的值給FullName(name),然後就會顯示最後更新的資料。