受控組件
1、每當表單的狀態發生變化時,都會被寫入到組件的state中
2、在受控組件中,組件渲染出的狀態與它的value或checked prop相對應
3、react受控組件更新state的流程
<1> 通過在初始state中設置表單的默認值
<2> 每當表單的值發生變化時,調用onChange事件處理器
<3> 事件處理器通過合成對象e拿到改變后的狀態,并更新應用的state
<4> SetState觸發視圖的重新渲染,完成表單組件值的更新
示例如下:
受控組件-input
頁面展示
4、使用受控組件需要為每一個組件綁定一個change事件,并且定義一個事件處理器來同步表單值和組件的狀態,某些情況可以使用一個事件處理器來處理多個表單域
示例
頁面展示
5、在受控組件上指定 value 的 prop 可以防止用戶更改輸入。(如果指定了 value,但輸入仍可編輯,則可能是意外地將value 設置為 undefined 或 null)
非受控組件
1、如果一個表單組件沒有value prop就可以稱為非受控組件
2、非受控組件是一種反模式,它的值不受組件自身的state或props控制
3、通常需要為其添加ref prop來訪問渲染后的底層DOM元素
示例