站長資訊網
最全最豐富的資訊網站

react中受控組件是啥

在react中,受控組件是用state來獲取和設置輸入元素值的組件;也可以理解為渲染表單的React組件還控制著用戶輸入過程中表單發生的操作,被React以這種方式控制取值的表單輸入元素就叫做受控組件。

react中受控組件是啥

本教程操作環境:Windows10系統、react17.0.1版、Dell G3電腦。

react中受控組件是啥

React官網中對于受控組件是這樣解釋的: 渲染表單的 React 組件還控制著用戶輸入過程中表單發生的操作。被 React 以這種方式控制取值的表單輸入元素就叫做“受控組件”。

用state來獲取和設置輸入元素值的組件,稱之為受控組件。<input type="text">, <textarea> 和 <select> 等標簽都可用 value 屬性,來實現受控組件。

有網友這樣解釋:在React中,每當表單的狀態發生變化時,都會被寫入到組件的state中,這種組件在React被稱為受控組件。

受控組件的更新流程:

1,可以通過在初始state中設置表單的默認值

2,每當表單的值發生變化時,調用onChange事件處理器,

3,事件處理器通過事件對象e拿到改變后的狀態,改變state;

4,setState觸發視圖更新,完成表單組件值的更新

示例:input

– 阻止表單提交

class NameForm extends React.Component {     constructor(props) {         super(props);         this.state = { value: '' };         this.handleChange = this.handleChange.bind(this);         this.handleSubmit = this.handleSubmit.bind(this);     }     handleChange(event) {         this.setState({ value: event.target.value });     }     handleSubmit(event) {         alert('提交的名字: ' + this.state.value);         event.preventDefault();     }     render() {         return (             <form onSubmit={this.handleSubmit}>                 <label>                     名字:                     <input type="text" value={this.state.value} onChange={this.handleChange} />                 </label>                 <input type="submit" value="提交" />             </form>         );     } }

– file類型input

// file類型的input,屬性value是只讀的,所以是非受控組件 <input type="file" />

推薦學習:《react視頻教程》

贊(0)
分享到: 更多 (0)
網站地圖   滬ICP備18035694號-2    滬公網安備31011702889846號
91视频精品全国免费观看| 日韩人妻无码精品久久免费一| 久久精品免费电影| 日韩精品人妻一区二区中文八零 | 国产精品V亚洲精品V日韩精品| 亚洲精品无码日韩国产不卡?V| 国内成人精品亚洲日本语音| 性虎精品无码AV导航| 国产精品岛国久久久久| 2021国内精品久久久久影院| 一区二区精品在线| 午夜精品久久久久久中宇| 久久精品中文字幕无码| 亚洲AV永久无码精品水牛影视| 国产亚洲精品岁国产微拍精品| 国产啪精品视频网站| 手机看片在线精品观看| 99re6在线精品免费观看| 久久精品国产只有精品66| 国产成人精品久久亚洲| 国产精品久久久99| 久久精品一区二区影院| 久久九九久精品国产免费直播| 久久久久人妻一区精品| 9丨精品国产高清自在线看| 成人区精品一区二区不卡| 中日精品无码一本二本三本| 亚洲精品夜夜夜妓女网| 国产亚洲欧洲精品| 亚洲国产成人精品无码区在线观看| 久久国产精品免费看| 亚洲精品高清国产一久久| 精品无码人妻一区二区三区| 亚洲精品在线播放| 亚洲精品国产精品国自产网站| 国产精品久久久久久麻豆一区 | 日韩中文字幕在线免费观看| 日韩免费视频在线观看| 尤物国精品午夜福利视频| 精品成人av一区二区三区| 中日精品无码一本二本三本|