在 HTML 中序厉,表單元素如 <input>
,<textarea>
和 <select>
表單元素通常保持自己的狀態(tài)微驶,并根據用戶輸入進行更新。而在 React 中开睡,可變狀態(tài)一般保存在組件的 state(狀態(tài)) 屬性中因苹,并且只能通過 setState()
更新。
設置表單元素的value屬性之后篇恒,其顯示值將由this.state.value決定扶檐,以滿足React狀態(tài)的同一數(shù)據理念。每次鍵盤敲擊之后會執(zhí)行handleChange方法以更新React狀態(tài)胁艰,顯示值也將隨著用戶的輸入改變款筑。
由于 value 屬性設置在我們的表單元素上,顯示的值總是 this.state.value腾么,以滿足 state 狀態(tài)的同一數(shù)據理念奈梳。由于 handleChange 在每次敲擊鍵盤時運行,以更新 React state(狀態(tài))解虱,顯示的值將更新為用戶的輸入攘须。
對于受控組件來說,每一次 state(狀態(tài)) 變化都會伴有相關聯(lián)的處理函數(shù)殴泰。這使得可以直接修改或驗證用戶的輸入于宙。
React 中浮驳,不使用 selected 屬性,而是在根 select 標簽中使用了一個 value 屬性限煞。這使得受控組件使用更方便抹恳,因為你只需要更新一處即可。
<input type="text">署驻, <textarea> 和 <select> 都以類似的方式工作 —— 它們都接受一個 value 屬性可以用來實現(xiàn)一個受控組件。