React之受控组件与非受控组件

在HTML当中，像input,textarea和select这类表单元素会维持自身状态，并根据用户输入进行更新。但在React中，可变的状态通常保存在组件的状态属性中，并且只能用 setState() 方法进行更新。
简单来说：

• 受控组件的状态由开发者维护
• 非受控组件的状态由组件自身维护（不受开发者控制）

1 非受控组件

• 非受控组件，即组件的状态不受React控制的组件

class Demo1 extends Component {
    render() {
        return (
            <input />
        )
    }
}
ReactDOM.render(<Demo1/>, document.getElementById('content'))

• 我们并没有干涉input中的value展示,即用户输入的内容都会展示在上面
• 我们可以给组件设置一个初始默认值defaultValue,目的类似于input的placeholder属性
• 此处如果使用value代替defaultValue,会发现输入框的值无法改变

2 受控组件

• 受控组件就是组件的状态受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值是在调用者上更新的