Day16 补充笔记React-Controlled Component

在学习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),然後就会显示最後更新的资料。