React Day04 收集表单数据之受控组件和非受控组件

最新推荐文章于 2023-07-30 12:13:32 发布
最新推荐文章于 2023-07-30 12:13:32 发布
阅读量90 收藏
点赞数
分类专栏： react 文章标签： javascript react
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/dyw3390199/article/details/116399862
版权

包含表单的组件分类： 受控组件和非受控组件

非受控组件

看一个例子：

在这里插入图片描述
在这里插入图片描述
我们再来实现一下点击获取用户名和密码并提示的功能：
在这里插入图片描述
在这里插入图片描述

原生的form表单在点击按钮以后会跳转到action对应的页面，我们不想跳转，可以怎么做？
可以使用原生的组织默认事件preventDefault
在这里插入图片描述

到此我们就写好了一个非受控组件

页面中所有输入类的DOM，都是现用现取的这种就是非受控组件

受控组件

在这里插入图片描述

页面中所有输入类的DOM，随着输入，就可以把值维护到state状态里面去，需要用的时候，直接从状态里面取，这就是受控组件
在这里插入图片描述

建议写受控组件，因为受控组件里面一个ref都没有

Akimoto Hiroshi
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
react基础Day02-受控组件&评论案例&props&context
码化疼
11-28 295
React组件 目标 能够知道受控组件是什么 能够写出受控组件 了解非受控组件 表单处理 受控组件（★★★） HTML中的表单元素是可输入的，也就是有自己的可变状态 而React中可变状态通常保存在state中，并且只能通过setState() 方法来修改 React讲state与表单元素值value绑定在一起，有state的值来控制表单元素的值 受控组件：值受到react控制的表单元素 ...
React form表单受控组件和非受控组件
peter的博客
09-22 1171
1.受控组件 每当表单的状态发生变化时，都会被写入到组件中的state中。 受控组件的更新流程如下： 可以通过在初始state中设置表单的默认值； 每当表单发生变化时，调用onChange事件处理器； 事件处理器通过合成事件对象e拿到改变后的状态，并更新应用的state； setState触发视图的重新渲染，完成表单组件值的更新； import React, {Component} from "react"; export default class Main extends Component {
[React]Day05—React 表单中受控组件与非受控组件
iChangebaobao的博客
05-25 117
Day05—React 表单中受控组件与非受控组件一、受控组件二、非受控组件 一、受控组件 作者：LinDaiDai_霖呆呆 链接：https://juejin.cn/post/6858276396968951822 在HTML的表单元素中，它们通常自己维护一套state，并随着用户的输入自己进行UI上的更新，这种行为是不被我们程序所管控的。 而如果将React里的state属性和表单元素的值建立依赖关系，再通过onChange事件与setState()结合更新state属性，就能达到控制用户输入过程
React学习day6受控和非受控组件，高阶函数和函数柯里化
weixin_46758732的博客
05-09 82
Reacr中的事件处理 1、通过onXXX属性指定事件处理函数（注意大小写） React使用的是自定义（合成）事件，而不是使用原生的DOM事件——为了更好的兼容性 React中的事件是通过事件委托方式处理的（委托给组件最外层的元素） 2、通过event.target得到发生事件的DOM元素对象 非受控组件和受控组件 需求：定义一个包含表单的组件，输入用户名和密码或，点击登录提示输入信息 ...
浅谈react受控组件与非受控组件(小结)
08-28
React 中的受控组件和非受控组件是两种不同的表单组件类型，它们之间的区别在于是否可以由外部控制组件的值。本文将详细介绍受控组件和非受控组件的概念、特点和使用场景。 一、非受控组件 非受控组件是一种不受...
浅谈React深度编程之受控组件与非受控组件
08-28
例如，在一个简单的列表视图中，可能只需要使用非受控组件来展示数据，而在一个复杂的表单中，可能需要使用受控组件来控制表单的行为。 React 中的受控组件和非受控组件是两个非常重要的概念，它们可以帮助开发者更...
React学习之受控组件与数据共享实例分析
10-15
在React开发中，受控组件（Controlled Components）和数据共享是两个重要的概念，它们对于构建可维护、可管理的应用程序至关重要。受控组件的概念源自于React如何处理表单元素的状态，而数据共享则涉及组件之间的...
React回调函数两种常用方式
Hiroshi's
09-20 2954
1. 回调是高阶函数，需要返回一个函数 2. 匿名函数，不用高阶
React页面刷新样式丢失问题及解决方案
Hiroshi's
06-28 1912
我们把路由都变成二级路由，统一加上/dean/路由前缀 效果： 看着没什么问题，但是一旦刷新页面，样式就废了： 我们把路由恢复，看看bootstrap网络请求正常不正常： 我们发现bootstrap请求地址是http://localhost:3000/css/bootstrap.css，localhost:3000是本地服务器，webpack里面的webServer配置了public这个文件夹都是localhost:3000/根目录对应的位置 我们通过地址请求看看： 如果请求了一个不存
React样式冲突解决方案
Hiroshi's
05-07 1353
App.js import React from 'react' import Hello from './components/Hello/Hello' import Welcome from './components/Welcome/Welcome' const { Component } = React // 创建外壳组件 export default class App extends Component { render () { return ( <div&g.
npm i 报错项目启动不了解决方法
最新发布
Hiroshi's
07-30 1184
在另一台电脑低版本node环境跑的react项目，换到另一台电脑node18环境执行npm i时候报错。
React DevTools failed to load source map: Could not load content for xxx问题解决
Hiroshi's
09-19 1112
运行react项目时候，控制台提示： 解决方法： 把这两个勾选去掉：
React路由(6)-Switch组件的使用
Hiroshi's
06-28 1002
如果有两个path一样的路由，那么这两个匹配的路由对应的组件都会显示： 这样的话效率就比较低，如果注册的路由特别多，找到一个匹配项以后还会一直往下找，我们想让react找到一个匹配项以后不再继续了，怎么处理？ 可以使用Switch组件 用Switch组件把其他所有Route组件包裹起来： 效果： 现在匹配上Home组件，就不会继续往下匹配相同path对应的Test组件了，所以Test…不显示 ...
React生命周期小练习getSnapshotBeforeUpdate和componentDidUpdate配合使用
Hiroshi's
05-05 844
目标： 每隔一秒生成一条新闻 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title
React路由(4)-NavLink的使用
Hiroshi's
06-28 790
NavLink默认会给被点击的元素添加active类名，因为bootstrap默认active就是高亮，所以会有下面的效果： NavLink也可以通过activeClassName属性设置给被点击的元素添加的类的名字，比如： 但是效果不太好，因为点击时候会闪，这是因为bootstrap样式权限比较高，所以我们改一下： ...
React之jsx遍历
Hiroshi's
09-08 640
react里面，数组可以自动被遍历 obj不能被遍历 {}花括号语法里面只能写js表达式，而不能写js语句 这样写： 改进：
React中的路由严格匹配 exact属性 和路由重定向 Redirect
Hiroshi's
06-28 629
react路由严格匹配 Redierct重定向 Redierct组件写在最下面， 如果上面的Route都匹配不上，那么就走最后的Redierct重定向to的路由： 现在输入：http://localhost:3000/ 默认会跳转到about页面：
React prop-types库使用对组件接收到的props进行类型必要性等限制
Hiroshi's
09-20 462
父组件： import React, { Component } from "react" import Header from "./components/Header" import Footer from "./components/Footer" import List from "./components/List" export default class App extends Component { state = { todos: [ { id: '001', msg:
react中受控组件和非受控组件
06-08
React中的组件可以分为两种类型：受控组件和非受控组件。 受控组件是指表单元素的值由React控制的组件，例如input、textarea和select等元素。这些组件的值通常由父组件通过props传递并在回调函数中更新，每当用户...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值