react组件实例三大属性之refs

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

ref官网说明

01-字符串的refs => 少用不推荐

<!DOCTYPE html>
<html lang="zh-CN">
<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>组件实例三大属性--refs</title>
</head>
<body>
  <div id="test"></div>
  
  <script type="text/javascript" src="../react_js/react.development.js"></script>
  <script type="text/javascript" src="../react_js/react-dom.development.js"></script>
  <script type="text/javascript" src="../react_js/babel.min.js"></script>

  <script type="text/babel">
    class RefsString extends React.Component{
      showData=()=>{
        console.log(this.refs.input1.value);
      }
      showDataTwo=()=>{
        console.log(this.refs.input2.value);
      }
      render(){
        return (
          <div>
            <input ref='input1' type="text" placeholder='点击按钮获取值'/>
            <button onClick={this.showData}>按钮</button>
            <input ref='input2' onBlur={this.showDataTwo} type="text" placeholder='失去焦点获取值'/>
          </div>
        )
      }

    }

    ReactDOM.render(<RefsString/>,document.getElementById('test'))
  </script>
</body>
</html>

在这里插入图片描述

02-回调函数的refs => 内联写法和class的绑定函数写法

<!DOCTYPE html>
<html lang="zh-CN">
<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>组件实例三大属性--refs</title>
</head>
<body>
  <div id="test"></div>
  
  <script type="text/javascript" src="../react_js/react.development.js"></script>
  <script type="text/javascript" src="../react_js/react-dom.development.js"></script>
  <script type="text/javascript" src="../react_js/babel.min.js"></script>

  <script type="text/babel">
    class RefsString extends React.Component{
      showData=()=>{
        console.log(this.input1.value);
      }
      showData2=()=>{
        console.log(this.input3.value);
      }
      showDataTwo=()=>{
        console.log(this.input2.value);
      }
      callBack1=(c)=>{
        this.input1 = c
      }
      callBack2=(c2)=>{
        this.input2=c2
      }
      render(){
        return (
          <div>
            <input ref={(c)=>{console.log(c,'内联写法');this.input3=c}} type="text" placeholder='点击按钮获取值=>内联'/>
            <input ref={this.callBack1} type="text" placeholder='点击按钮获取值'/>
            <button onClick={this.showData}>按钮</button>
            <button onClick={this.showData2}>内联按钮</button>
            <input onBlur={this.showDataTwo} ref={this.callBack2} onBlur={this.showDataTwo} type="text" placeholder='失去焦点获取值'/>
          </div>
        )
      }

    }

    ReactDOM.render(<RefsString/>,document.getElementById('test'))
  </script>
</body>
</html>

03-createRef的使用 => 推荐写法(最新)

<!DOCTYPE html>
<html lang="zh-CN">
<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>组件实例三大属性--refs</title>
</head>
<body>
  <div id="test"></div>
  
  <script type="text/javascript" src="../react_js/react.development.js"></script>
  <script type="text/javascript" src="../react_js/react-dom.development.js"></script>
  <script type="text/javascript" src="../react_js/babel.min.js"></script>

  <script type="text/babel">
    class RefsString extends React.Component{
      // React.createRef()返回一个容器, 容器里面包裹ref标识的节点, 而且容器里面只能有一个节点(专人专用)
      MyRef1 = React.createRef();
      MyRef2 = React.createRef();

      showData=()=>{
        console.log(this.MyRef1.current.value);
      }
      showDataTwo=()=>{
        console.log(this.MyRef2.current.value);
      }
      render(){
        return (
          <div>
            <input ref={this.MyRef1} type="text" placeholder='点击按钮获取值'/>
            <button onClick={this.showData}>按钮</button>
            <input ref={this.MyRef2} onBlur={this.showDataTwo} type="text" placeholder='失去焦点获取值'/>
          </div>
        )
      }

    }

    ReactDOM.render(<RefsString/>,document.getElementById('test'))
  </script>
</body>
</html>
前端菜鸟--LKX
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
React组件refs的使用详解
08-28
例如，在从 render 方法中返回 UI 结构之后，你可能想冲出 React 虚拟 DOM 的限制，在 render 返回的组件实例上调用某些方法。 3. Ref 的两种类型：Ref 有两种类型，一种是字符串，一种是回调函数。字符串类型的 ...
React中的refs的使用教程
08-27
React中的refs是指在React组件中使用的一种特殊属性，可以用来绑定到render()输出的任何组件上去。这个特殊的属性允许你引用render()返回的相应的支撑实例（backing instance）。这样就可以确保在任何时间总是拿到...
React组件三大属性之refs
Mr-yang的随笔
07-20 179
一、理解 Refs 提供了一种方式，允许我们访问 DOM 节点或在 render 方法中创建的 React 元素。 Ref 转发是一项将 ref 自动通过组件传递到子组件的技巧。 通常用来获取 DOM 节点或者 React 元素实例的工具。在 React 中 Refs 提供了一种方式，允许用户访问 DOM 节点或者在 render 方法中创建的 React 元素。 二、使用 1、回调函数形式的ref ☆这种方式是最常用的，如果 ref 回调函数是以内联函数的方式定义的，在更新过程中它会被执行两次，第一次传入
React.ClassAttributes＜HTMLDivElement＞.ref?: React.LegacyRef＜HTMLDivElement＞
叶子先生的博客
04-06 3369
(JSX attribute) React.ClassAttributes.ref?: React.LegacyRef Type ‘MutableRefObject’ is not assignable to type ‘LegacyRef’. Type ‘MutableRefObject’ is not assignable to type ‘RefObject’. Types of property ‘current’ are incompatible. Property ‘align’ is miss
React ref属性
kk的博客
12-17 642
React ref属性
react useState ,useEfffect设置元素高度，注意加单位
u010234868的专栏
04-15 1137
import React, {useState, useEffect} from 'react'; import { Card } from 'antd'; const test = props => { const [heig, setHeight] = useState(); useEffect(() => { const div = document.getElementsByClassName('healthCharacteristicsCard')[0]; .
React中ref获取元素的宽度、高度
ximenxiafeng的专栏
08-20 1万+
定义HTMLParagraphElement类型属性 pvcDesDom:HTMLParagraphElement 2.componentDidMount中获取高度。 componentDidMount() { setTimeout(function () { this.setState({ scrollHeight: this.pvcDesDom.scrollHeight }) }.bind(this)) } 3.元素上追加ref
React创建组件的三种方式及其区别
08-31
无状态组件不使用`this`关键字，无法访问组件实例的方法和属性，如`this.state`或`this.refs`。它们也没有生命周期方法，意味着无法在特定组件生命周期阶段执行操作。由于这些限制，无状态组件适用于只依赖props且不...
React Refs
12-13
React 支持一种非常特殊的属性 Ref ，你可以用来绑定到 render() 输出的任何组件上。 这个特殊的属性允许你引用 render() 返回的相应的支撑实例（ backing instance ）。这样就可以确保在任何时间总是拿到正确的...
react中函数式组件获取元素大小宽度的用法
qq_42939143的博客
08-11 3473
react函数组件通过不同方式获取元素的大小方式
Vue ref 和 $refs 获取元素宽高
林中明月间丶
10-27 1万+
快速获取节点demo <div ref="div1">123</div> <input type="text" value="123" ref="input1" id="input1"> console.log(this.$refs.div1)//<div>123</div> console.log(this.$refs.inp...
React下获取width和height
robin912的专栏
05-10 5万+
React下获取width和height 利用ref保存DOM节点，然后读取clientWidth,clientHeight获取宽高参数。 import React, { Component } from 'react'; import 'assets/css/App.css' export class App extends Component { constructor(p...
【VUE系列】获取元素宽度高度等
IU
05-25 947
获取元素宽度 给元素绑定个 ref 如 <div ref="divWidth">测试</div> 使用函数获取 //可以输出如下对象，查找到宽度clientWidth 高度 clientHight this.$refs.divWidth //分割 this.$refs.divWidth.clientWidth; //宽度 this.$refs.divWidth.clientHight; //高度 ...
react16 ref 自适应宽高
weixin_40222803的博客
12-18 1152
class Card extends React.Component { constructor(props) { super(props); this.state = { width: props.width || -1, height: props.height || -1, } } componentDidMount() { ...
Vue 获取dom元素宽高，给el-table表格设置动态高度:height；最大高度:max-heigh
林中明月间丶
06-04 1万+
https://www.jianshu.com/p/371659eb1fe3 //获取table的宽度 :style="'width:'+dataWidths+'px'" letdataWidth=this.$refs.tab1.offsetWidth;//offsetHeight
VUE通过refs获取元素宽高
weixin_47711357的博客
12-10 1万+
VUE通过refs获取元素宽高 1.如果元素设定了宽高 例： 2.如果元素未设定宽高 例
react的ref获取dom元素
qq_40816649的博客
05-07 6563
刚开始学习react，也不知道是运气好还是运气不好，一开始挑了vue作为主要的框架vue的操作还是算比较简单的在三大框架中（拿来即用）。而react相对来说会比较复杂一点涉及到的js原理性的东西也比较多包括es6等等。 从vue到react会感觉有很多东西感觉比较新没有见过比如每个事件要bind(this)将定义的react对象绑定到事件上，不然默认this是指向点击的元素而获取不到constr...
react的ref三种使用方式，获取元素内容
前端小白的逆袭
11-08 4775
react的ref三种使用方式，获取元素内容
vue 获取 指定元素的高度宽度等（使用vue中的 ref 获取到的是 dom 元素高度或者宽度）
热门推荐
KLW75
07-14 5万+
使用 vue 的时候，想要获得一个指定的元素的高度时，可以使用 vue 中的ref 。 当 ref 加在普通的元素上，使用 this.ref.name 获取到的是 dom 元素 示例 写在 页面 html 部分的 <div ref="init"></div> 写在 页面 方法 部分 这里的offsetHeight 是返回元素的宽度（包括元素宽度、内边距和边框，不包括外边距） let height= this.$refs.init.offsetHeight...
react 三大属性
最新发布
07-28
回答: React中的三大属性是props、state和refs。\[1\] props是组件的属性，可以通过this.props来访问。它可以用来传递数据给组件，并且可以对属性值进行类型限制和必要性限制。可以使用PropTypes来进行属性类型的...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值