受控组件与非受控组件

妖狐艹你老母 2021-12-12 23:57 274阅读 0赞

### 文章目录 ###

*  受控组件
 *   *  更新state的流程
     *  例子
 *  非受控组件
 *   *  例子

# 受控组件 #

所谓受控组件就是每当表单的状态发生变化时，都会被写入到组件的state中，这种组件就被称为受控组件。

在受控组件中，组件渲染出的状态与它的`value`或`checked prop`相对应。React通过这种方式消除了组件的局部状态。

## 更新state的流程 ##

1.  可以通过在初始`state`中设置表单的默认值
2.  每当表单的值发生变化，调用`onChange`事件处理器
3.  事件处理器通过合成事件对象拿到改变后的状态，并更新应用的`state`
4.  `setState`触发视图的重新渲染，完成表单组件值得更新

每次表单值发生变化时，都会执行上述几步。这样统一了组件内部状态，使表单的状态更可靠。这也意味着，在执行最后一步`setState`之前，我们可以对值进行修饰。

## 例子 ##

class Controlled extends Component{
        
      constructor(props){
        
        super(props);
        this.state = {
        
          inputState: ''
        }
        this.changeHandle = this.changeHandle.bind(this);
      }
    
      changeHandle(e){
        
        this.setState({
        
          inputState: e.target.value.toUpperCase()
        });
      }
    
      render(){
        
        const {
        inputState} = this.state;
        return (
          <div>
            <input type='text' value={
        inputState} onChange={
        this.changeHandle}></input>
          </div>
        )
      }
    }

上述代码就是一个典型的受控组件。

在React中，数据是单向流动的，从上面代码中可以看出表单的数据源于组件的`state`，并通过`props`传入，这也称为单向数据绑定。然后，我们又通过`onChange`事件处理函数将新的表单数据写会到组件的`state`，完成了双向数据绑定。

同时，在`setState`之前，还对表单数据进行了转换成大写的操作。

# 非受控组件 #

如果一个表单组件没有`value props`（单选框和复选框对应的是`checked prop`）时，就可以称之为非受控组件。

## 例子 ##

class Uncontrolled extends Component{
        
      constructor(props){
        
        super(props);
        
        this.changeHandle = this.changeHandle.bind(this);
      }
    
      changeHandle(e){
        
        const input = this.refs.input;
        input.value = e.target.value.toUpperCase();
      }
    
      render(){
        
        return (
          <div>
            <input type='text' ref='input' onChange={
        this.changeHandle} defaultValue="Shenzhen"></input>
          </div>
        )
      }
    }

可以使用`defaultValue`或`defaultChecked`来表示组件的默认状态。

在React中，非受控组件是一种反模式，它的值不受组件自身的`state`或`props`控制。**通常需要通过添加`ref`来访问渲染后的DOM元素**。