浅析React中的受控组件和非受控组件

2024-04-02 19:04:59 507人浏览独家记忆

摘要

目录非受控组件受控组件注意结论非受控组件表单数据由DOM本身处理。即不受setState()的控制，与传统的html表单输入相似，input输入值即显示最新值（使用 re

非受控组件

表单数据由DOM本身处理。即不受setState()的控制，与传统的html表单输入相似，input输入值即显示最新值（使用 ref从DOM获取表单值）

1.非受控组件


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--准备好一个容器-->
<div id="test"></div>

<!--引入React核心库-->
<script src="../js/react.development.js"></script>
<!--引入react-dom，用于支持react操作dom-->
<script src="../js/react-dom.development.js"></script>
<!--引入babel，用于将jsx转为js-->
<script src="../js/babel.min.js"></script>
<!--引入prop-types,用于对组件标签属性进行限制-->
<script src="../js/prop-types.js"></script>

<script type="text/babel">
    class Login extends React.Component {
        myRef1 = React.createRef();
        myRef2 = React.createRef();
        handleSubmit = (event) => {
            event.preventDefault() // 阻止表单提交
            const username = this.myRef1.current
            const passWord = this.myRef2.current
            alert(`您输入的用户名是:${username.value},您输入的密码是：${password.value}`)
        }
        render() {
            return (
                <fORM onSubmit={this.handleSubmit}>
                    用户名：<input ref={this.myRef1} type="text"/> &nbsp;
                    密码：<input ref={this.myRef2} type="text"/> &nbsp;
                    <button>登录</button>
                </form>
            )
        }
    }
    ReactDOM.render(<Login/>,document.getElementById('test'))
</script>
</body>
</html>

受控组件

在HTML中，标签<input>、<textarea>、<select>的值的改变通常是根据用户输入进行更新。在React中，可变状态通常保存在组件的状态属性中，并且只能使用 setState() 更新，而呈现表单的React组件也控制着在后续用户输入时该表单中发生的情况，以这种由React控制的输入表单元素而改变其值的方式，称为：“受控组件”。

2.受控组件（受到控制）


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--准备好一个容器-->
<div id="test"></div>

<!--引入react核心库-->
<script src="../js/react.development.js"></script>
<!--引入react-dom，用于支持react操作dom-->
<script src="../js/react-dom.development.js"></script>
<!--引入babel，用于将jsx转为js-->
<script src="../js/babel.min.js"></script>
<!--引入prop-types,用于对组件标签属性进行限制-->
<script src="../js/prop-types.js"></script>

<script type="text/babel">
    class Login extends React.Component {
        // 初始化状态
        state = {
            username: '',
            password: ''
        }

        // 保存用户名到状态中
        saveUsername = (e) => {
            this.setState({username: e.target.value})
        }

        // 保存密码到状态中
        savePassword = (e) => {
            this.setState({password: e.target.value})
        }

        handleSubmit = (e) => {
            e.preventDefault() // 阻止表单提交
            const {username,password} = this.state
            alert(`您输入的用户名是:${username},您输入的密码是：${password}`)
        }
        render() {
            // onChange是一有变化就改变
            return (
                <form onSubmit={this.handleSubmit}>
                    用户名：<input onChange={this.saveUsername} type="text"/> &nbsp;
                    密码：<input onChange={this.savePassword} type="text"/> &nbsp;
                    <button>登录</button>
                </form>
            )
        }
    }
    ReactDOM.render(<Login/>,document.getElementById('test'))
</script>
</body>
</html>

在这里插入图片描述

注意

一般情况，受控组件用的多，因为在非受控组件中会多次使用ref，而官方文档上有些“请勿过度使用ref”，使用次数多了会存在效率上的问题。

结论

受控和非受控元素都有其优点，根据具体情况选择。如果表单在UI反馈方面非常简单，则对ref进行控制是完全正确的，即使用非受控组件。

特征	非受控制	受控
一次性检索（例如表单提交）	yes	yes
及时验证	no	yes
有条件的禁用提交按钮	no	yes
执行输入格式	no	yes
一个数据的几个输入	no	yes
动态输入	no	yes

以上就是浅析React中的受控组件和非受控组件的详细内容，更多关于react受控组件和非受控组件的资料请关注编程网其它相关文章！

点击免费下载>>软考高级考试备考技巧/历年真题/备考精华资料

--结束END--

本文标题: 浅析React中的受控组件和非受控组件

本文链接: https://www.lsjlt.com/news/126239.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑，方便收藏和打印～

下载Word文档

去做题

猜你喜欢

浅析React中的受控组件和非受控组件

目录非受控组件受控组件注意结论非受控组件表单数据由DOM本身处理。即不受setState()的控制，与传统的HTML表单输入相似，input输入值即显示最新值（使用 re...

99+

2024-04-02
React受控组件与非受控组件实例分析讲解

目录一、受控组件二、非受控组件三、总结一、受控组件在HTML中，表单元素的标签、、等的值改变通常是根据用户输入进行更新。在React中，可变状态通常保存在组件的状态属性中，并且只...

99+

2023-01-18

React受控组件与非受控组件 React受控组件 React非受控组件
React中怎么实现受控组件与非受控组件

本篇文章给大家分享的是有关React中怎么实现受控组件与非受控组件，小编觉得挺实用的，因此分享给大家学习，希望大家阅读完这篇文章后可以有所收获，话不多说，跟着小编一起来看看吧。受控组件与非受控组件是Reac...

99+

2024-04-02
React受控组件与非受控组件深入讲解

目录一、非受控组件二、受控组件三、高阶函数（函数柯里化）实现1、定义2、实现四、不用函数柯里化的实现一、非受控组件表单中输入类DOM的值现用现取 <script type="...

99+

2022-12-26

React受控组件 React非受控组件
React受控组件与非受控组件详细介绍

目录1. 受控组件1.1 介绍1.2 受控组件简写1.3 在表单中使用受控组件1.4 综合案例2. 非受控组件介绍非受控组件的应用1. 受控组件 1.1 介绍概述：将 state...

99+

2024-04-02
react受控组件和不受控组件的区别有哪些

今天小编给大家分享的是react受控组件和不受控组件的区别有哪些，相信很多人都不太了解，为了让大家更加了解，所以给大家总结了以下内容，一起往下看吧。一定会有所收获的哦。 reac...

99+

2024-04-02
react非受控组件指的是什么

这篇文章主要介绍“react非受控组件指的是什么”，在日常操作中，相信很多人在react非受控组件指的是什么问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答”react非受控组件...

99+

2024-04-02
react中受控组件指的是什么

本文小编为大家详细介绍“react中受控组件指的是什么”，内容详细，步骤清晰，细节处理妥当，希望这篇“react中受控组件指的是什么”文章能帮助大家解决疑惑，下面跟着小编的思路慢慢深入，一起来学习新知识吧。...

99+

2024-04-02
react受控组件指的是什么

这篇文章主要介绍“react受控组件指的是什么”，在日常操作中，相信很多人在react受控组件指的是什么问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答”react受控组件指的是...

99+

2024-04-02
React源码中怎么实现受控组件

本篇内容主要讲解“React源码中怎么实现受控组件”，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习“React源码中怎么实现受控组件”吧!在React中一个简单的受...

99+

2024-04-02
React中受控组件与数据共享的示例分析

这篇文章主要介绍React中受控组件与数据共享的示例分析，文中介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们一定要看完！具体如下：在HTML当中，像<input>,<textarea...

99+

2024-04-02
如何理解React受控组件Hooks方式

这篇文章主要介绍“如何理解React受控组件Hooks方式”，在日常操作中，相信很多人在如何理解React受控组件Hooks方式问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答”...

99+

2024-04-02
React如何使用Hooks简化受控组件的状态绑定

这篇文章主要介绍React如何使用Hooks简化受控组件的状态绑定，文中介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们一定要看完！ECMAScript 6文章中大量用到了 ES6 语法，比如解构赋值和...

99+

2024-04-02
React组件通信浅析

目录1、函数式组件2、类式组件1、函数式组件 <script type="text/babel"> // 1. 创建函数式组件 function Demo() {...

99+

2022-12-26

React组件 React组件通信
React 组件权限控制的实现

目录前话正文1. 控制方式1.1 直接计算1.2 通用权限Hoc1.3 权限包裹组件2. 控制结果2.1 显隐控制2.2 自定义渲染3. 权限数据3.1 静态权限3.2 动态权限前话...

99+

2024-04-02
浅析Vue单文件组件与非单文件组件使用方法

单文件组件：一个文件中只包含一个组件，后缀为.vue（常用） <template>  <div> <p...

99+

2022-12-21

Vue单文件组件 Vue非单文件组件
浅析vue中的组件传值

目录一、正向传值验证写法 props验证更多验证二、逆向传值自定义事件实现逆向传值三、同胞传值/兄弟传值low的方式（了解）中央事件总线 eventBus前言：只要是做项目，组件和...

99+

2024-04-02
CSS中不受控制position fixed的示例分析

小编给大家分享一下CSS中不受控制position fixed的示例分析，相信大部分人都还不怎么了解，因此分享这篇文章给大家参考一下，希望大家阅读完这篇文章后大有收获，下面让我们一起去了解一下吧！失效的 position:fixed在许多情...

99+

2023-06-15
分析React组件，Hooks和性能

这篇文章主要讲解了“分析React组件，Hooks和性能”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“分析React组件，Hooks和性能”吧！正如我们的R...

99+

2024-04-02
深入浅析Java中的条件控制与循环控制

今天就跟大家聊聊有关深入浅析Java中的条件控制与循环控制，可能很多人都不太了解，为了让大家更加了解，小编给大家总结了以下内容，希望大家根据这篇文章可以有所收获。条件控制语句：1. if-else语句if(条件1){代码块1;}else i...

99+

2023-05-31

java 循环控制条件控制