React的受控組件和非受控組件

 

在HTML當中，像<input>,<textarea>, 和 <select>這類表單元素會維持自身狀態，並根據用戶輸入進行更新。但在React中，可變的狀態一般保存在組件的狀態屬性中，而且只能用 setState() 方法進行更新。

 

非受控組件

非受控組件，即組件的狀態不受React控制的組件，例以下邊這個

import React, { Component } from 'react'; import ReactDOM from 'react-dom'; class Demo1 extends Component { render() { return ( <input /> ) } } ReactDOM.render(<Demo1/>, document.getElementById('content'))

在這個最簡單的輸入框組件裏,咱們並無干涉input中的value展現,即用戶輸入的內容都會展現在上面。若是咱們經過props給組件設置一個初始默認值,defaultValue屬性是React內部實現的一個屬性,目的相似於input的placeholder屬性。
ps: 此處若是使用value代替defaultValue,會發現輸入框的值沒法改變。

受控組件

一樣的，受控組件就是組件的狀態受React控制。上面提到過，既然經過設置input的value屬性, 沒法改變輸入框值,那麼咱們把它和state結合在一塊兒,再綁定onChange事件,實時更新value值就好了。

class Demo1 extends Component { constructor(props) { super(props); this.state = { value: props.value } } handleChange(e) { this.setState({ value: e.target.value }) } render() { return ( <input value={this.state.value} onChange={e => this.handleChange(e)}/> ) } }

這就是最簡單的受控組件模型, 咱們能夠經過在onChange的回調裏控制input要顯示的值,例如咱們設置input框只能輸入數字

this.setState({ value: e.target.value.replace(/\D/g, '') })

如今咱們應該徹底明白form表單中受控組件和非受控組件的關係。受控組件採起的理念相似於redux的單項數據流理念,即value值是在調用者上更新的。