元件型別
表單資料處理方式
受控元件
react元件處理
非受控dom處理（使用ref）
受控元件：
class nameform extends react.component ;
this.handlechange = this.handlechange.bind(this);
this.handlesubmit = this.handlesubmit.bind(this);
} handlechange(event) );
} handlesubmit(event)
render()
}
class nameform extends react.component
handlesubmit(event)
render()
}
使用場景
非受控受控
一次性值的檢查（如表單提交）yy
表單提交時校驗yy
即時現場驗證xy
有條件的禁用提交按鈕xy
強制文字框格式化xy
乙個資料的幾個輸入xy
動態inputxy
備註：如果表單在ui反饋方面很簡單，使用不受控完全ok。
3.受控
每乙個表單元素，獨有乙個不同的prop設定它的值。下面是**彙總（含文字框、核取方塊、單選框、文字域、選擇）
4.非受控元件，設定預設值時用defaultvalue。
this.input = input} />5.檔案輸入
是乙個不受控元件，因為它的值不是以程式設計方式設定。
備註：建立ref節點以訪問提交處理程式中的檔案：
class fileinput extends react.component
handlesubmit(event) `
);} render()
}reactdom.render(
, document.getelementbyid('root')
);
受控元件 非受控元件
宣告，本部落格摘自 表單元件像 input textarea 不同於其它的原生元件，因為它們會隨著使用者互動而改變。這些元件提供了介面方便我們管理這些互動。互動屬性 表單元件提供了一些受使用者互動影響的屬性 受控元件 設定了value的input就是乙個受控元件。input裡會一直展現這個值 var...
受控元件與非受控元件
受控元件與非受控元件 是否受狀態控制。我們來實現乙個react的雙向資料繫結 讓輸入框輸入值，下面的顯示跟著變化 import react,from react import reactdom from react dom class input extends component render r...
受控元件與非受控元件
針對於表單元素而言，如果資料由元件本身進行維護，讓react的state狀態成為唯一資料來源的話，那就是受控元件。非受控元件不需要寫事件處理函式，由dom自身進行維護。一般通過ref進行dom的繫結。受控元件 在html中，表單元素通常自己維護 state，並根據使用者輸入進行更新。而在 react...