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值是在调用者上更新的。