学习记录——react受控组件和非受控组件，操作dom（ React.createRef()）

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

受控组件和非受控组件


受控组件：主要应用于表单元素。受控值得是表单中的值，和状态绑定
有受控组件，也有非受控组件。非受控的意思是表单的值不与状态绑定

受控组件
通过受控方式取值，可以实时的去拿，就像vue里的v-model，可以动态获取值。前提是，input框里的值要绑定到state里去。
在这里插入图片描述
打开页面查看：
在这里插入图片描述

非受控
在react中，我们可以通过ref来获取dom元素
用法：在需要获取的dom元素标签中使用ref=’xxx’
使用this.refs.xxx就可以获取到这个dom元素了
在这里插入图片描述
打开浏览器查看：如果有报错先不要管
在这里插入图片描述
当点击button的时候，控制台会输出绑定了ref的dom元素
而如果想要得到input里的值，直接.value即可
在这里插入图片描述
在这里插入图片描述
这就是 非受控：值不受状态影响，也就是状态不能实时获取它的值。

关于报错
在这里插入图片描述
Warning: A string ref, “ipt”, has been found within a strict mode tree. String refs are a source of potential bugs

最低0.47元/天 解锁文章
　　　SakuraZr
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
什么是React受控组件和非受控组件
tyxjolin的专栏
03-24 2103
React是一个非常流行的JavaScript库，用于构建Web应用程序。React中有两种类型的组件，受控组件和非受控组件。在本文中，我们将深入研究这两种组件的区别，优缺点以及如何选择适当的组件类型。什么是React组件React组件是一种用于构建用户界面的代码单元。组件可以是类组件或函数组件，它们都可以接收输入并返回输出。React中的组件是可重用的，这意味着您可以在应用程序的不同部分使用相同的组件，以减少重复代码和提高应用程序的可维护性。React中的组件可以是受控组件或非受控组件。
React.createRef()的使用
qq_32339737的博客
06-20 5334
最新的react废弃了this.refs，ref引用的写法有了改变。 使用React.createRef()后，通过ref的current属性将能得到dom节点或组件的实例 class MyComponent extends React.Component { constructor(props) { super(props); this.bodyBox = React.createRef(); } getDom () { const bodyBoxDom = this.bodyBox
React中受控组件和非受控组件
alive_new的博客
04-07 531
当表单被提交时，handleSubmit方法被调用，并打印出输入框的当前值。value属性被绑定到组件的状态this.state.value上，而handleChange方法用于更新状态每当输入框的值发生变化时。受控组件是指其值由React的状态（state）控制的输入元素。这意味着，组件的当前值是由React的状态决定的，并且每次状态更新时，组件都会重新渲染以反映最新的值。非受控组件是指其值不受React状态控制的输入元素。非受控组件直接使用用户输入的最新值，而不是依赖于React的状态。
A string ref, “title“, has been found within a strict mode tree. String refs are a source of po
不确定因素的博客
01-20 1223
react严格模式报错:Warning: A string ref, "title", has been found within a strict mode tree. String refs are a source of potential bugs and should be avoided. We recommend using useRef() or createRef() instead. Learn more about using refs safely here:
什么是 useRef , useRef 与 createRef 区别, 以及在什么情况下使用 useRef
热门推荐
frontend_frank的博客
02-09 2万+
前言: 这篇文章会假设你已经对 react hook有一些基础的了解. 主要讨论什么是 useRef , useRef 与 createRef 的区别, 以及在什么情况下使用 use...
React中useRef()和createRef()的使用
weixin_45679977的博客
03-30 2977
useRef() import React, {useState, useRef, createRef, useEffect } from 'react'; const Test = ()=>{ const [ index, setIndex ] = useState(1); const createRefDiv = createRef(); const useRefDiv =...
React组件化开发初试共20页.pdf.zip
10-30
类组件则通过继承React.Component，提供了状态和生命周期方法，使得处理复杂逻辑和更新更灵活。 1. **函数组件**： 函数组件没有自己的状态，只负责渲染视图。例如： ```jsx function Welcome(props) { return ...
controlled-component:管理React受控组件的示例
04-30
React受控组件的概念源于这样一个原则：组件的值（例如输入字段的值）由React组件本身完全控制，而不是由DOM元素独立管理。这使得在React应用中管理和更新用户输入数据变得简单且可预测。 在受控组件中，每当用户在...
Vue 中的受控与非受控组件的实现
01-19
受控组件 什么是受控组件？ 其值由React控制的输入表单元素...表单数据由 DOM 处理的组件非受控组件。 非受控组件有两个特点：1. 不设置value值，2. 通过ref获取dom节点然后再取value值 <input type=text placeh
react组件基本用法示例小结
10-15
inputRef = React.createRef(); handleClick = () => { console.log(this.inputRef.current.value); }; render() { return ( <input type="text" ref={this.inputRef} /> <button onClick={this....
React框架面试题.pdf
最新发布
06-20
4. 受控组件和非受控组件有什么区别？ 5. React中的keys有什么作用？ 6. React中的状态（state）和属性（props）有什么区别？ 7. 解释生命周期方法，比如`componentDidMount`和`componentDidUpdate`的作用。 8. 如何...
React 属性, 函数式组件以及Hook
ZZZ___jh的博客
07-29 467
属性以及函数式组件,HookReact的五个属性PureComponentrefchildrendangerouslySetInnerHTMLkey的问题函数式组件React hooks什么是HookReact Hooks的优势常用HookHook的使用规则总结: 五个属性: PureComponent、ref、children、dangerouslySetInnerHTML、key React的五个属性 PureComponent 个人理解是PureComponent 是类组件的情况下,它是用来继承的
关于typescript + react +antd 的Function components cannot have string refs. We recommend using useRef()
SmallWite的博客
09-17 3082
关于typescript + react +antd 的Function components cannot have string refs. We recommend using useRef()问题 我这里是一个走马灯 想要调用 他的prev ,next 方法可是按照网上的说法用this.ref.(自己取的名字).prev();就会报出 Function components cannot have string refs. We recommend using useRef()这个问题。我百思不得其
从系统报错角度看 React 组件的的受控与非受控
辰辰沉沉大辰沉
04-17 2546
defaultValue 只在初始加载的时候起作用，只有，defaultValue将不会更新，因为它的用法是设置初始默认值，如果有需要更新可以使用 value That’s not how defaultValue works. If you use defaultValue, that means “I only want to set it programmatically once, an...
React createRef：引用
weixin_33709609的博客
03-01 753
一 代码 import React, { Component } from 'react'; class Box extends Component { render() { return <button>你好</button>; } } export default class MyComponent ...
React - ref
cmchenmei的博客
01-15 126
reference 引用 function A (){ return (<h1>组件AAA</h1>) } <A ref="comA" /> // 不可这样使用，但是函数组件内部是可以使用ref的 过时方式（不要使用） 以聚焦input事件为例，以前的ref使用方式，ref 值为string已经过时，随时可能被移除（不建议使用，在16版中已不再可...
react中的受控组件，非受控组件；
qq_29854831的博客
03-09 1484
刚开始react的时候就接触到受控组件和非受控组件这个概念，然后那个时候长用的组件，比如input,select都是属于受控组件。受控组件：&lt;input type="text" value={this.state.value} onChange={(e) =&gt; { this.setState({ value: e.targ...
input change获取改变之前的值和改变之后的值_使用Vue3.0新特性造轮子 WidgetUI3.0 （Input输入框组件）
weixin_39622399的博客
11-20 2347
我们先看看组件效果图：基本用法type属性(type="password")占位符(placeholder="请输入")带清除按钮(clear)输入限制(max=6)props组件属性：type(类型 String)组件输入的类型，默认 "text"，可选所有原生input类型。max(类型 String || Number)组件输入限制。placeholder(类型 String)组件默认显示文...
React中的受控组件和非受控组件学习总结
weixin_33753845的博客
03-20 603
故事：Form表单是前端开发过程中经常使用的功能， 在使用react 表单时，都会遇到受控组件或者非受控组件。当我听到这两个关键词的时候确实有点懵逼，不知道啥意思，因此记录下来，作为自己的学习目标受控组件(React官方推荐使用受控组件)在React中，每当表单的状态发生变化时，都会被写入到组件的state中，这种组件在React被称为受控组件import React, {PureComponen...
react中受控组件和非受控组件
06-08
React中的组件可以分为两种类型：受控组件和非受控组件。 受控组件是指表单元素的值由React控制的组件，例如input、textarea和select等元素。这些组件的值通常由父组件通过props传递并在回调函数中更新，每当用户...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值