React学习（五）React组件属性之三refs

已于 2024-01-25 17:18:04 修改
阅读量344 收藏 7
点赞数 8
文章标签： react.js 学习 javascript
于 2024-01-25 17:16:05 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_52551375/article/details/135846182
版权

refs的简单使用

1.字符串形式的ref

<!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>Document</title>
</head>
<body>
    <div id= 'test'></div>
    <script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script>
    <script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script>
    <!-- 生产环境中不建议使用 -->
    <script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>
    <!-- 引入prop-types，用于对标签属性进行限制 -->
    <!-- <script type="text/javascript" src="..js/prop-types.js"></script> -->
    <script src="https://cdn.bootcdn.net/ajax/libs/prop-types/15.8.1/prop-types.js"></script>
    <script type="text/babel">
        // 创建
        class Demo extends React.Component {
            // 展示左侧输入框的数据
            showData = ()=>{
                console.log(this.refs)
                const {input1}=this.refs
                alert(input1.value)
            }
            // 展示右侧输入框的数据
            showData2=()=>{
                const {input2}=this.refs
                alert(input2.value)
            }
            render(){
                return (
                    <div >
                        <input ref="input1" type = "text" placeholder="点击按钮提示数据"/>&nbsp;
                        <button ref="button100" type="button" onClick={this.showData}>点击按钮提示左侧数据</button>&nbsp;
                        <input ref="input2" onBlur={this.showData2} type="text" placeholder="失去焦点提示数据"/>

                    </div>
                )

            }
        }
        // 渲染
        ReactDOM.render(<Demo/>,document.getElementById('test'))
    </script>
</body>
</html>

2.回调函数形式的ref

<!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>Document</title>
</head>
<body>
    <div id= 'test'></div>
    <script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script>
    <script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script>
    <!-- 生产环境中不建议使用 -->
    <script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>
    <!-- 引入prop-types，用于对标签属性进行限制 -->
    <!-- <script type="text/javascript" src="..js/prop-types.js"></script> -->
    <script src="https://cdn.bootcdn.net/ajax/libs/prop-types/15.8.1/prop-types.js"></script>
    <script type="text/babel">
        // 创建
        class Demo extends React.Component {
            // 展示左侧输入框的数据
            showData = ()=>{
                const {input1}=this
                alert(input1.value)
            }
            // 展示右侧输入框的数据
            showData2=()=>{
                const {input2}=this
                alert(input2.value)
            }
            render(){
                return (
                    <div >
                        <input ref={(c)=>{this.input1=c}} type = "text" placeholder="点击按钮提示数据"/>&nbsp;
                        <button ref="button100" type="button" onClick={this.showData}>点击按钮提示左侧数据</button>&nbsp;
                        <input ref={(c)=>{this.input2=c}} onBlur={this.showData2} type="text" placeholder="失去焦点提示数据"/>

                    </div>
                )

            }
        }
        // 渲染
        ReactDOM.render(<Demo/>,document.getElementById('test'))
    </script>
</body>
</html>

3.回调ref中的回调次数

若ref回调函数是以内联函数的方式定义的，在更新过程中它会被执行两次，第一次传入参数null，第二次传入参数DOM元素。因为每次渲染时会创建一个新的函数实例，所以React清空旧的ref并且设置新的，通过将ref的回调函数定义成class的绑定函数的方式可以避免上述问题，但是大多数情况是无关紧要的

<!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>Document</title>
</head>
<body>
    <div id= 'test'></div>
    <script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script>
    <script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script>
    <!-- 生产环境中不建议使用 -->
    <script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>
    <!-- 引入prop-types，用于对标签属性进行限制 -->
    <!-- <script type="text/javascript" src="..js/prop-types.js"></script> -->
    <script src="https://cdn.bootcdn.net/ajax/libs/prop-types/15.8.1/prop-types.js"></script>
    <script type="text/babel">
        // 创建
        class Demo extends React.Component {
            // 获取原来状态
            state = {isHot:false}
            // 更新状态
            changeWeather = ()=>{ 
                const {isHot}=this.state
                this.setState({isHot:!isHot})
            }
            saveInput = (c)=>{
                this.input1=c; 
                console.log('@',c)
            }
            // 展示左侧输入框的数据
            showInfo = ()=>{
                const {input1}=this
                alert(input1.value)
            }
            render(){
                const {isHot}=this.state
                return (
                    <div >
                        <h2>今天天气很{isHot ?'炎热':'凉爽'}</h2>
                        {/* <input ref={(c)=>{this.input1=c; console.log('@',c)}} type = "text" placeholder="点击按钮提示数据"/>&nbsp;*/}
                        <input ref={this.saveInput} type = "text" placeholder="点击按钮提示数据"/><br/>
                        <button ref="button100" type="button" onClick={this.showInfo}>点击按钮提示数据</button>&nbsp;
                        <button onClick = {this.changeWeather}>点击改变天气状态</button>
                    </div>
                )

            }
        }
        // 渲染
        ReactDOM.render(<Demo/>,document.getElementById('test'))
    </script>
</body>
</html>

4.createRef 形式的ref

<!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>Document</title>
</head>
<body>
    <div id= 'test'></div>
    <script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script>
    <script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script>
    <!-- 生产环境中不建议使用 -->
    <script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>
    <!-- 引入prop-types，用于对标签属性进行限制 -->
    <!-- <script type="text/javascript" src="..js/prop-types.js"></script> -->
    <script src="https://cdn.bootcdn.net/ajax/libs/prop-types/15.8.1/prop-types.js"></script>
    <script type="text/babel">
        // 创建
        class Demo extends React.Component {
            // React.creatRef调用后可以返回一个容器，该容器可以存储被ref所标识的节点,该容器是"专人专用"的
            myRef = React.createRef()
            myRef2 = React.createRef()
            // 展示左侧输入框的数据
            showData = ()=>{
                // const {input1}=this
                alert(this.myRef.current.value)
            }
            showData2 = ()=>{
                // const {input1}=this
                alert(this.myRef2.current.value)
            }
            render(){
                return (
                    <div >
                        <input ref={this.myRef} type = "text" placeholder="点击按钮提示数据"/>&nbsp;
                        <button ref="button100" type="button" onClick={this.showData}>点击按钮提示左侧数据</button>&nbsp;
                        <input ref={this.myRef2} type = "text" placeholder="失去焦点提示数据" onBlur={this.showData2 }/>&nbsp;
                    </div>
                )

            }
        }
        // 渲染
        ReactDOM.render(<Demo/>,document.getElementById('test'))
    </script>
</body>
</html>
qq_52551375
关注
  • 8
    点赞
  • 踩
  • 7
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
极智开发 | 讲解 React 组件三大属性之三：refs
极智视界
08-04 265
大家好，我是极智视界，本文讲解一下 React 组件三大属性之三：refs。
React组件refs的使用详解
08-28
主要介绍了React组件refs的使用详解，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
react组件的三大属性之三refs
Han_Zhou_Z的博客
03-10 637
目录 一、react组件的三大属性之三refs 1、react组件的三大属性 2、使用方法 3、模块化管理 4、回调Refs 一、react组件的三大属性之三refs 1、react组件的三大属性 （1）props属性：封装传递给组件的参数 （2）state属性：组件的状态,当值发生改变后,重新渲染组件 （3）refs属性 通过该属性可以去访问DOM元素或render函数中的react元素(虚拟的DOM元素) --- DOM元素或render函数中的react元素的代理(句柄)
React 入门：组件实例三大属性之refs
将PHP Web开发进行到底
10-22 364
Refs 允许我们访问 DOM 节点或在 render 方法中创建的 React 元素。
react组件实例三大核心属性之refs
qq_51219425的博客
03-08 567
三大核心属性分别是：state、props、refs refs属性 组件内的标签可以定义refs属性来标识自己 字符串形式的ref 通过ref="input1"获取标签属性值 通过this.refs传值展现 完整代码： <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>1_字符串形式的ref</title> </head> &lt
react组件实例三大属性之refs
lkx_20201106的博客
11-28 208
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">
【React】三大核心属性refs
z914020826的博客
03-14 458
Refs其实是提供了一个对真实DOM（组件）的引用，我们可以通过这个引用直接去操作DOM（组件）
从零开始学习React：了解组件的三大属性
Junerver的博客
05-22 497
从零开始学习React：了解当前React常用技术，编写第一个React组件 从零开始学习React：了解组件的三大属性 上一节我们简单介绍了React的相关技术栈，以及如何在一个 html 文件中使用 React，创建一个React 组件并渲染到Html 中。 本节我们来介绍在 React 中 一个组件比较重要的三大属性 组件三大属性 就如我们上一节中介绍的一个最简单的函数式组件是这样的： const H2 = ({ title }) => <h2>{title}</h2&gt
React组件三大属性state、props、refs
quettabyte
10-27 525
React组件三大属性的学习笔记
React组件三大属性之refs
Mr-yang的随笔
07-20 175
一、理解 Refs 提供了一种方式，允许我们访问 DOM 节点或在 render 方法中创建的 React 元素。 Ref 转发是一项将 ref 自动通过组件传递到子组件的技巧。 通常用来获取 DOM 节点或者 React 元素实例的工具。在 React 中 Refs 提供了一种方式，允许用户访问 DOM 节点或者在 render 方法中创建的 React 元素。 二、使用 1、回调函数形式的ref ☆这种方式是最常用的，如果 ref 回调函数是以内联函数的方式定义的，在更新过程中它会被执行两次，第一次传入
react基础 - 组件实例的三大核心属性-refs
hibufan的博客
07-10 279
refs组件内包含ref属性的标签元素的集合对象 给操作目标标签指定ref属性, 打一个标识 在组件内部获得标签对象: this.refs.refName(只是得到了标签元素对象) 作用: 找到组件内部的真实dom元素对象, 进而操作它 在jsx中代码的注释（避免在结构中写注释） 1.内联的回调函数 2.class类绑定的回调函数 并在class用用赋值语句+箭头函数，，传入currentNode，，.........
React Refs
12-13
React 支持一种非常特殊的属性 Ref ，你可以用来绑定到 render() 输出的任何组件上。 这个特殊的属性允许你引用 render() 返回的相应的支撑实例（ backing instance ）。这样就可以确保在任何时间总是拿到正确的...
React中的refs的使用教程
08-27
本篇文章主要介绍了React中的refs的使用教程，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
react Refs使用
01-07
//Refs使用，绑定dom元素，ref 不能设置在无状态组件上 //不要在 render 或者 render 之前访问 refs import React, { Component } from 'react'; class Refsdemo extends Component { constructor(props) { super...
（四）React组件、useState、组件样式
二进制杯莫停的博客
06-09 276
概念：一个组件就是用户界面的一部分，它可以有自己的逻辑和外观，组件之间。组件化开发可以让开发者像搭积木一样构建一个完整的庞大应用。
（三）React事件
二进制杯莫停的博客
06-09 427
语法：事件绑定的位置改造成箭头函数的写法，再执行clickHandler实际处理业务函数的时候传递实参注意：不能直接写函数调用，这里事件绑定需要一个函数引用。
React中数据响应式原理
linzhongshu的专栏
06-10 317
在React中，数据响应式是通过组件的状态（State）和属性（Props）来实现的。当状态或属性发生变化时，React会自动重新渲染组件，以确保UI与数据保持同步。这种机制背后的原理是React的虚拟DOM（Virtual DOM）。虚拟DOM是一个轻量级的JavaScript对象，它是实际DOM的抽象。React通过比较新旧虚拟DOM的差异，计算出最小的更新操作，然后应用到实际DOM上。这大大减少了直接操作DOM的次数，提高了性能。
React的表单学习
qq_36935391的博客
06-08 392
react的表单的双向绑定。
React基础教程(06)：Ref的应用
最新发布
WwLK123的博客
06-12 218
react的Ref应用的简单介绍。
react中的子组件改父组件Refs
08-12
在React中，子组件可以通过Refs来修改父组件的状态或调用父组件的方法。这可以通过将父组件的方法传递给子组件，并在子组件中使用Refs来调用该方法完成。 首先，在父组件中创建一个Ref，并将其传递给子组件。子组件...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值