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

本教程操作環(huán)境：Windows10系統(tǒng)、react17.0.1版、Dell G3電腦。

react中受控組件是啥

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

用state來獲取和設(shè)置輸入元素值的組件，稱之為受控組件。<input type="text">, <textarea> 和 <select> 等標(biāo)簽都可用 value 屬性，來實(shí)現(xiàn)受控組件。

有網(wǎng)友這樣解釋：在React中，每當(dāng)表單的狀態(tài)發(fā)生變化時，都會被寫入到組件的state中，這種組件在React被稱為受控組件。

受控組件的更新流程：

1，可以通過在初始state中設(shè)置表單的默認(rèn)值

2，每當(dāng)表單的值發(fā)生變化時，調(diào)用onChange事件處理器，

3，事件處理器通過事件對象e拿到改變后的狀態(tài)，改變state；

4，setState觸發(fā)視圖更新，完成表單組件值的更新

示例：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" />

推薦學(xué)習(xí)：《react視頻教程》