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

·  阅读 12139
React 之受控组件和非受控组件

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

表单受控组件

  • 表单元素依赖于状态,表单元素需要默认值实时映射到状态的时候,就是受控组件,这个和双向绑定相似.
  • 受控组件,表单元素的修改会实时映射到状态值上,此时就可以对输入的内容进行校验.
  • 受控组件只有继承React.Component才会有状态.
  • 受控组件必须要在表单上使用onChange事件来绑定对应的事件.
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}
                    onChange={this.handleChange} /> <br />

                <p>{this.state.pwd}</p>
                密码:<input
                    name="pwd"
                    type="text"
                    value={this.state.pwd}
                    onChange={this.handleChange} /> <br />
            </div>
        )
    }
}

复制代码

受控组件显示结果

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

注意:

  • 在受控组件中,如果没有给输入框绑定onChange事件,将会收到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>
        )
    }
}
复制代码

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

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

非受控组件

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

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

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

第一种方式是函数

  • 在虚拟DOM节点上使用ref,并使用函数,将函数的参数挂载到实例的属性上
handleSubmit = (e) => {
    // 阻止原生默认事件的触发
    e.preventDefault();
    console.log(this.username.value);
}
render() {
    return (
        <form onSubmit={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 onSubmit={this.handleSubmit}>
            {/* 自动将输入框中输入的值放在实例的second属性上 */}
            密码<input
                name="password"
                type="text"
                ref={this.second}
            /><br />
        </form>
    )
}
复制代码

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

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

分类:
前端
标签:
收藏成功!
已添加到「」, 点击更改