react受控組件與非受控組件

非控組件:

 Input、textarea等普通元素默認是非受控組件（輸入框內部的值是用戶控制和React無關）

// 這種簡單的input就是非控組件
<input type="text"/>

 

---

 

受控組件:

 受控組件就是可以被 react 狀態控制的組件
 Input、textarea等普通元素通常onChange 事件獲取當前輸入內容使用setState()來更新維護 state，
將當前輸入內容作爲 value 傳入，此時就成爲受控組件。
好處：可以通過 onChange 事件控制用戶輸入，使用正則表達式過濾不合理輸入。

 

 

 

react官網上推薦使用 受控組件(controlled components)
詳情看鏈接：https://reactjs.org/docs/uncontrolled-components.html#gatsby-focus-wrapper

 

 

 

 

最後說點啥：

現在時間是週日22：22，週末也很多事情做本不想拖到現在才寫文章

我也不是什麼天才大佬只是一名普通前端搬磚工，

但挺喜歡這種寫文章分享的過程，雖然我文筆也很爛

感慨前端技術浩如煙海，越學習越覺得自己知識不足。

 

感覺《react受控組件與非受控組件》寫的很好的大佬的文章分享下：

https://www.cnblogs.com/wonyun/p/6023363.html

https://www.cnblogs.com/yiangli/p/9613147.html