什么是受控組件

在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屬性。

受控組件

同樣的，受控組件就是組件的狀態受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)}/>
        )
    }
}