一、受控元件
);
}}/>
1.可以通過初始state中設定表單的預設值;
2.每當表單的值發生變化時,呼叫onchange事件處理器;
3.事件處理器通過合成事件物件e拿到改變後的狀態,並更新應用的state.
4.setstate觸發檢視的重新渲染,完成表單元件值得更新
react中資料是單向流動的.從示例中,我們能看出來表單的資料**於元件的state,並通過props傳入,這也稱為單向資料繫結.然後,我們又通過onchange事件處理器將新的表單資料寫回到state,完成了雙向資料繫結.
二、非受控元件
如果乙個表單元件沒有value props(單選按鈕和複選按鈕對應的是 checked props)時,就可以稱為非受控元件;
使用defaultvalue和defaultchecked來表示元件的預設狀態;
通過 defaultvalue和defaultchecked來設定元件的預設值,它僅會被渲染一次,在後續的渲染時並不起作用
import react, from 'react';
class uncontrolled extends component
render()
}export default uncontrolled;
將輸入的字母轉化為大寫展示
);
}}/>
);
}}/>
在受控元件中,每次表單的值發生變化,都會呼叫一次onchange事件處理器,這確實會帶來效能上的的損耗,雖然使用費受控元件不會出現這些問題,但仍然不提倡使用非受控元件,這個問題可以通過flux/redux應用架構等方式來達到統一元件狀態的目的.
五、是否需要事件繫結
使用受控元件需要為每乙個元件繫結乙個change事件,並且定義乙個事件處理器來同步表單值和元件的狀態,這是乙個必要條件.當然,某些情況可以使用乙個事件處理器來處理多個表單域
import react, from 'react';
class controlled extends component ;
}handlechange = (name, e) => = e.target;
this.setstate();
}render() = this.state;
return ();}
}export default controlled;
1.狀態屬性
react的form元件提供了幾個重要的屬性,用來顯示元件的狀態
value: 型別為text的input元件,textarea元件以及select元件都借助value prop來展示應用的狀態
checked: 型別為radio或checkbox的元件借助值為boolean型別的selected prop來展示應用的狀態
selected: 該屬性可作用於select元件下面的option上,react並不建議這種方式表示狀態.而推薦在select元件上使用value的方式
2.事件屬性
當狀態屬性改變時會觸發onchange事件屬性.受控元件中的change事件與html dom中提供的input事件更為類似;
react中受控元件和非受控元件
react受控元件與非受控元件
在html中，標籤input textarea select的值的改變通常是根據使用者輸入進行更新。在react中，可變狀態通常儲存在元件的狀態屬性中，並且只能使用 setstate 更新，而呈現表單的react元件也控制著在後續使用者輸入時該表單中發生的情況，以這種由react控制的輸入表單元素而...
react受控元件與非受控元件
非控元件 input textarea等普通元素預設是非受控元件 輸入框內部的值是使用者控制和react無關 這種簡單的input就是非控元件 受控元件 受控元件就是可以被 react 狀態控制的元件 input textarea等普通元素通常onchange 事件獲取當前輸入內容使用setstat...
react的受控元件與非受控元件
在使用react component時，都會遇到受控元件或者非受控元件 在目前，react元件推薦使用stateless component，但是使用該形式來實現react component時使用非受控元件到倒是沒有什麼大問題，若是需要控制受控元素就會有出現問題，表現在 受控元件 需要主動維護乙個...