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

更新时间：2021年05月18日 10:53:49 作者：非著名奶茶爱好者

具体来说这是一种react非受控组件，其状态是在input的react内部控制，不受调用者控制。可以使用受控组件来实现。下面就说说这个React中的受控组件与非受控组件的相关知识，感兴趣的朋友一起看看吧

非受控组件

表单数据由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受控组件和非受控组件的资料请关注脚本之家其它相关文章！

您可能感兴趣的文章:

React实现简单登录的项目实践
登录、注册、找回密码是前端项目经常遇到的需求,本文主要介绍了React实现简单登录的项目实践,具有一定的参考价值,感兴趣的可以了解一下
2024-01-01
React Native 中处理 Android 手机吞字的解决方案
这篇文章主要介绍了React Native 中处理 Android 手机吞字的解决方案,作者在 React Native 0.67.4 环境下，编写了一个小 demo 来复现这个问题，需要的朋友可以参考下
2022-08-08
ReactNative 之FlatList使用及踩坑封装总结
本篇文章主要介绍了ReactNative 之FlatList使用及踩坑封装总结，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2017-11-11
react组件封装input框的防抖处理的项目实现
本文主要介绍了react组件封装input框的防抖处理的项目实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2023-04-04
React中引用CSS方式及写法大全(三种方式)
在React中引用CSS的方法有多种,可以根据个人的喜好和项目的需求来选择，本文主要介绍了React中引用CSS方式及写法大全，感兴趣的可以了解一下
2023-10-10
详解React Native开源时间日期选择器组件(react-native-datetime)
本篇文章主要介绍了详解React Native开源时间日期选择器组件(react-native-datetime)，具有一定的参考价值，有兴趣的可以了解一下
2017-09-09
react-router-dom v6版本实现Tabs路由缓存切换功能
今天有人问我怎么实现React-Router-dom类似标签页缓存,很久以前用的是react-router v5那个比较容易实现,v6变化挺大,但了解react的机制和react-router的机制就容易了,本文介绍react-router-dom v6版本实现Tabs路由缓存切换,感兴趣的朋友一起看看吧
2023-10-10
React组件化的一些额外知识点补充
React是一个用于构建用户界面的JavaScript库,下面这篇文章主要给大家介绍了关于React组件化的一些额外知识点,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
2022-10-10
浅谈React-router v6 实现登录验证流程
本文主要介绍了React-router v6 实现登录验证流程，主要介绍了公共页面、受保护页面和登录页面，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2022-05-05
详解React Native 采用Fetch方式发送跨域POST请求
这篇文章主要介绍了详解React Native 采用Fetch方式发送跨域POST请求，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2017-11-11