react受控组件与非受控组件

受控组件

介绍：受控组件就是受我们控制。组件的状态全程响应外部的数据

举个栗子 上代码 ↓：

class App extends React.Component{
	constructor(){
		this.state = {
			name:'张三'
		}
	}
	render(){
		return(
			<input type='text' value={this.state.name}/>
		)
	}
}

当我们对输入框输入内容的时候，会发现输入的内容根本显示不出来，也就是input框是只读的状态。

这是为哈呢？

因为input框被绑定了一个属性 this.state.name，当我们进行输入的时候state中的值并不会立即更新，这样也就导致输入的值不能显示。

那怎么办呢？

其实只需要给input框绑定一个onChang事件，每次输入的时候都在回调函数中对state进行更新。这样就可以输入内容啦~

像这样↓

class App extends React.Component{
	constructor(){
		this.state = {
			name:'张三'
		}
	}
	setInput = (e)=>{
		this.setState({
			name:e.target.value
		})
	}
	render(){
		return(
			<input type='text' onChange={(e)=>this.setInput(e)} value={this.state.name}/>
		)
	}
}

似不似 soeasy 啊~

让我们继续~

非受控组件

介绍：受控组件受我们控制，那么非受控组件就是不受我们的控制。一般情况下，非受控组件是在初始化的时候接受外部数据，然后自己在自身内部存储自身状态。

当我们需要值的时候可以通过 ref 查找dom并查找对应的值。
如下

import React, { Component } from 'react';

export class UnControll extends Component {
  constructor (props) {
    super(props);
    this.inputRef = React.createRef();
  }
  handleSubmit = (e) => {
    console.log('我们可以获得input内的值为', this.inputRef.current.value);
    e.preventDefault();
  }
  render () {
    return (
      <form onSubmit={e => this.handleSubmit(e)}>
        <input defaultValue="lindaidai" ref={this.inputRef} />
        <input type="submit" value="提交" />
      </form>
    )
  }
}

两者应用场景

大部分的时候还是推荐使用受控组件，因为表单数据由react组件处理，可控性比较高。使用非受控组件的话，可控性比较弱，但表单数据由dom本身处理，方便快捷，代码量比较少。

针对两者情况，两者应用区别如下图所示