受控组件和非受控组件

最新推荐文章于 2024-08-03 09:28:46 发布

SeriesM

最新推荐文章于 2024-08-03 09:28:46 发布

阅读量1k

点赞数

分类专栏：前端文章标签： react.js javascript 前端

本文链接：https://blog.csdn.net/weixin_44003391/article/details/121801940

版权

前端专栏收录该内容

27 篇文章 1 订阅

订阅专栏

本文详细介绍了React中的受控组件和非受控组件。受控组件通过事件处理函数控制表单数据，而非受控组件则允许数据自由流动，通过setState更新状态。文中给出了实例代码，强调了在实际应用中如何管理和处理表单数据，并提醒避免过度使用ref。

摘要由CSDN通过智能技术生成

受控组件和非受控组件

一、React中的事件处理？

1. 通过onXxx属性指定事件处理函数(注意大小写)

1)	React使用的是自定义(合成)事件, 而不是使用的原生DOM事件——兼容性
（这里指的是React对onclick事件进行了再封装变成了onClick）

2)	React中的事件是通过事件委托方式处理的(委托给组件最外层的元素)——更高效
（类似于<u>  <li></li><li></li><li></li></u>都交给了最外层的u）

2. 通过event.target得到发生事件的DOM元素对象
我们给每个事件绑定响应函数，实际上都会默认把DOM对象作为event参数带过去，我们就可以通过event.target来获取
在这里插入图片描述
React官网让我们尽量少使用ref那么我们input刚刚好可以省略
（因为我们点击事件和要使用的事件在一个DOM对象上）

二、受控组件和非受控组件

以表单为例：定义一个包含表单的组件，输入用户名密码后，点击登录提升输入信息

1.受控组件（现用现取）

页面中的所有数据，都是现用现取的
代码如下（示例）：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<div id="test"></div>
<!--引入依赖库-->
<script src="js/react.development.js"></script>
<script src="js/react-dom.development.js"></script>
<script src="js/babel.min.js"></script>
<script type="text/babel">
  //1、定义组件
    class Login extends React.Component{
        //表单提交
        //这里的event是表单 里面的target属性是：<form action="https://www.baidu.com">用户名：<input type="text" name="username">密码：<input type="password" name="password"><button>确定</button></form>
        //但是我们可以通过 event.preventDefault()类似ajax阻止表单同步提交
        handleSubmit=(event)=>
        {
            event.preventDefault();//可以阻止action调转和无action时候的刷新动作
            const {username,password}=this;
            alert(username.value);
        }
        render()
        {
            return (  
                <form  action="https://www.baidu.com" onSubmit={this.handleSubmit}>
                    用户名：<input ref={(c)=>{this.username=c;}} type="text" name="username"/>
                    密码：<input ref={(c)=>{this.password=c;}}type="password" name="password"/>
                    <button >确定</button>
                </form>
            )
        }
    }
    //2、渲染
    ReactDOM.render(<Login/>,document.getElementById("test"));
</script>
</body>
</html>

2.非受控组件

代码如下（示例）：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<div id="test"></div>
<!--引入依赖库-->
<script src="js/react.development.js"></script>
<script src="js/react-dom.development.js"></script>
<script src="js/babel.min.js"></script>
<script type="text/babel">
    //1、定义组件
    class Login extends React.Component{
        //初始化转态
        state={
            username:"",
            password:""
        }

        //将用户名在组件中更改
        changeUsername=(event)=>
        {
            this.setState({username:event.target.value});
        }
        //将密码在组件中更改
        changePassword=(event)=>
        {
            this.setState({password:event.target.value});
        }

        render()
        {
            return (
                <form  action="https://www.baidu.com" onSubmit={this.handleSubmit}>
                    用户名：<input onChange={this.changeUsername} type="text" name="username"/>
                    密码：<input onChange={this.changePassword} type="password" name="password"/>
                    <button >确定</button>
                </form>
            )
        }

    }
    ReactDOM.render(<Login/>,document.getElementById("test"));
</script>
</body>
</html>

在这里插入图片描述

表单提交书写

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<div id="test"></div>
<!--引入依赖库-->
<script src="js/react.development.js"></script>
<script src="js/react-dom.development.js"></script>
<script src="js/babel.min.js"></script>
<script type="text/babel">
    //1、定义组件
    class Login extends React.Component{
        //初始化转态
        state={
            username:"",
            password:""
        }

        //将用户名在组件中更改
        changeUsername=(event)=>
        {
            this.setState({username:event.target.value});
        }
        //将密码在组件中更改
        changePassword=(event)=>
        {
            this.setState({password:event.target.value});
        }
        //表单提交
        handleSubmit=(event)=>
        {
            event.preventDefault();//可以阻止action调转和无action时候的刷新动作
            const {username,password}=this.state;
            alert(`用户名是${username},密码是${password}`);
        }
        render()
        {
            return (
                <form  action="https://www.baidu.com" onSubmit={this.handleSubmit}>
                    用户名：<input onChange={this.changeUsername} type="text" name="username"/>
                    密码：<input onChange={this.changePassword} type="password" name="password"/>
                    <button >确定</button>
                </form>
            )
        }

    }
    ReactDOM.render(<Login/>,document.getElementById("test"));
</script>
</body>
</html>