React 之受控组件和非受控组件

在React中，所谓受控组件和非受控组件，是针对表单而言的。

表单受控组件

• 表单元素依赖于状态，表单元素需要默认值实时映射到状态的时候，就是受控组件，这个和双向绑定相似.
• 受控组件，表单元素的修改会实时映射到状态值上，此时就可以对输入的内容进行校验.
• 受控组件只有继承React.Component才会有状态.
• 受控组件必须要在表单上使用 事件来绑定对应的事件.

class Control extends React.Component {    // 这样的写法也是声明在实例上的对象    state = {// 给组件状态设置默认值，在实时修改时进行校验        username: "zf",        pwd: "123"    }    // e为原生的事件绑定对象    handleChange = (e) => {        // 获取原生对象上的属性        let name = e.target.name;        // 根据表单元素的name名称进行匹配，比如用户名的name是username，那新输入的值将更新原来的值        this.setState({            [name]: e.target.value        })    }    render() {        return (            <div>                <p>{this.state.username}</p>                用户名：<input                    name="username"                    type="text"                    value={this.state.username}                     ={this.handleChange} /> <br />                <p>{this.state.pwd}</p>                密码：<input                    name="pwd"                    type="text"                    value={this.state.pwd}                     ={this.handleChange} /> <br />            </div>        )    }}复制代码

受控组件显示结果

怎么样，这个效果是不是和双向绑定很相似？

注意：

• 在受控组件中，如果没有给输入框绑定 事件，将会收到react的警告
• 并且此时输入框除了默认值，是无法输入其他任何参数的

class Control extends React.Component {    constructor() {        super();        this.state = {            username: "zds",            age: 10        }    }    render() {        return (            <div>                username:<input                    type="text"                    name="username"                    value={this.state.username} /><br />                age:<input                    type="text"                    name="age"                    value={this.state.age} />            </div>        )    }}复制代码

结果可以从如下图中看出：

• 输入框没有绑定 事件无法修改输入框中的值
• 会触发react警告

非受控组件

• 非受控组件即不受状态的控制，获取数据就是相当于操作DOM。
• 非受控组件的好处是很容易和第三方组件结合。

获取输入框中的值的两种方法

• ref 功能是一样，只是写法不一样，可以让我们操作DOM

第一种方式是函数

• 在虚拟DOM节点上使用ref，并使用函数，将函数的参数挂载到实例的属性上

handleSubmit = (e) => {    // 阻止原生默认事件的触发    e.preventDefault();    console.log(this.username.value);}render() {    return (        <form  ={this.handleSubmit}>            {/* 将真实的DOM，username是输入框中输入的值赋值给组件实例上                这样，在页面表单提交的时候就可以通过this.username.value获取到输入框输入的值            */}            用户名<input                name="username"                type="text"                ref={username=>this.username=username}            /><br />        </form>    )}复制代码

现在我们来看看第一种非受控方式是如何获取输入框中的值的：

第二种方式：通过构造函数声明的方式

• react 16.3新语法
• 实例的构造函数constructor这创建一个引用
• 在虚拟DOM节点上声明一个ref属性，并且将创建好的引用赋值给这个ref属性
• react会自动将输入框中输入的值放在实例的second属性上

constructor(){    super();    // 在构造函数中创建一个引用    this.second=React.createRef();}handleSubmit = (e) => {    // 阻止原生默认事件的触发    e.preventDefault();    console.log(this.second.current.value);}render() {    return (        <form  ={this.handleSubmit}>            {/* 自动将输入框中输入的值放在实例的second属性上 */}            密码<input                name="password"                type="text"                ref={this.second}            /><br />        </form>    )}复制代码

现在我们来看看第二种非受控方式是如何获取输入框中的值的：

好了，react关于表单的受控组件和非受控组件就先整理到这里，有问题的话，欢迎大家留言沟通！