表單

受控元件

官方定義

在 HTML 中，表單元素（如<input>、 <textarea> 和 <select>）通常自己維護 state，並根據使用者輸入進行更新。而在 React 中，可變> 狀態（mutable state）通常儲存在元件的 state 屬性中，並且只能通過使用 setState()來更新。

我們可以把兩者結合起來，使 React 的 state 成為“唯一資料來源”。渲染表單的 React 元件還控制著使用者輸入過程中表單發生的操作。被 React 以這種方式控制取值的表單輸入元素就叫做“受控元件”。

總結： 受控元件就相當與 Vue 中的 v-model

注意點：在受控元件上指定 value 的 prop 會阻止使用者更改輸入 ，value 設定為 undefined 或 null 了 使用者可以自行輸入

正確的方式是：

• 有 value 的繫結，就得有對應的 onChange 或者 onInupt 通過 setState 修改 value
• 如果讓使用者自行輸入資料值，而無需對變化做處理 ，可以使用非受控元件

react-router-dom

Route 放入 children 和 component 中的區別

// children 中 home 通過 props 獲取不到路由資料
<Route path="/home">
    <Home />
</Route>
// component 中 home 通過 props 可以獲取到路由資料
<Route path="/home" component={Home}>
</Route>