＜笔记＞组件实例三大属性_refs

最新推荐文章于 2022-04-08 20:39:08 发布
最新推荐文章于 2022-04-08 20:39:08 发布
阅读量65 收藏
点赞数 2
分类专栏： react 前端 文章标签： react
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_50465271/article/details/114984481
版权
前端 同时被 2 个专栏收录
21 篇文章 0 订阅
订阅专栏
react
17 篇文章 0 订阅
订阅专栏

refs属性

1.字符串形式的ref

2.回调函数形式的ref

3.回调ref中回调执行次数问题

4.creatRef

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="../js/react.development.js"></script>
    <script src="../js/react-dom.development.js"></script>
    <script src="../js/babel.min.js"></script>

    <script type="text/babel">
    //创建组件
    class Demo extends React.Component{
        showData = ()=>{
            const {input1} = this.refs
            alert(input1.value)
        }
        showData2 =()=>{
            const {input2} = this.refs
            alert(input2.value)
        }
        render(){
        return(
            <div>
                <input ref="input1" type="text" placeholder="点击按钮提示数据"/>
                <button onClick={this.showData}>点我提示左侧的数据</button>
                <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="../js/react.development.js"></script>
    <script src="../js/react-dom.development.js"></script>
    <script src="../js/babel.min.js"></script>

    <script type="text/babel">
    //创建组件
    class Demo extends React.Component{
        showData = ()=>{
            const {input1} = this //es6语法 相当于 const input1 = this.input1
            alert(input1.value)
        }
        showData2 =()=>{
            alert(this.input2.value)
        }
        render(){
        return(
            <div>
                <input ref={(c)=>{this.input1 = c}} type="text" placeholder="点击按钮提示数据"/>
                <button onClick={this.showData}>点我提示左侧的数据</button>
                <input onBlur={this.showData2} ref={(c)=>{this.input2 = c}} onBlur={this.showData2} type="text" placeholder="失去焦点提示数据"/>
            </div>
        )
        }
    }
    ReactDOM.render(<Demo/>,document.getElementById('test'))
    </script>
</body>
</html>

3.回调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="../js/react.development.js"></script>
    <script src="../js/react-dom.development.js"></script>
    <script src="../js/babel.min.js"></script>

    <script type="text/babel">
    //创建组件
    class Demo extends React.Component{
        showData = ()=>{
            const {input1} = this //es6语法 相当于 const input1 = this.input1
            alert(input1.value)
        }
        showData2 =()=>{
            alert(this.input2.value)
        }
        render(){
        return(
            <div>
                <input ref={(c)=>{this.input1 = c}} type="text" placeholder="点击按钮提示数据"/>
                <button onClick={this.showData}>点我提示左侧的数据</button>
                <input onBlur={this.showData2} ref={(c)=>{this.input2 = c}} onBlur={this.showData2} type="text" placeholder="失去焦点提示数据"/>
            </div>
        )
        }
    }
    ReactDOM.render(<Demo/>,document.getElementById('test'))
    </script>
</body>
</html>

4.creatRef

<!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="../js/react.development.js"></script>
    <script src="../js/react-dom.development.js"></script>
    <script src="../js/babel.min.js"></script>

    <script type="text/babel">
    //创建组件
    class Demo extends React.Component{
        //React.createRef调用后可以返回一个容器，容器可以存储被ref所标识的节点,该容器是专人专用的
        myRef = React.createRef()
        showData = ()=>{
            console.log(this.myRef.current.value)
        }
        showData2 =()=>{
            alert(this.input2.value)
        }
        render(){
        return(
            <div>
                <input ref={this.myRef} type="text" placeholder="点击按钮提示数据"/>
                <button onClick={this.showData}>点我提示左侧的数据</button>
            </div>
        )
        }
    }
    ReactDOM.render(<Demo/>,document.getElementById('test'))
    </script>
</body>
</html>
teriri丶
关注
  • 2
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
React读书笔记-组件特殊场景下的手动绑定事件1
08-08
此外，React的事件处理函数默认是自动绑定到当前组件实例的，这意味着在组件的方法中可以直接访问`this`，而无需在构造函数中使用`.bind(this)`。这种机制称为autobinding，简化了代码并避免了`this`的引用问题。 ...
reactjs ref属性：字符串类型的ref和createRef
学亮编程手记
01-31 335
关于vue里的$refs属性
weixin_30516243的博客
08-14 1066
vuejs的极大程度的帮助减少了对dom的操作，他主要通过添加ref属性，但是当获取this.$refs属性时，稍有不注意就会输出undefined导致我们对dom节点的操作报错。 this.$refs.xxx为undefined的几种情况记录： 1、在created里钩子函数中调用 原因：created（）在实例创建完成后被立即调用。在这一步，实例已完成以下的配置：数据观测 (d...
Vue Markdonwn学习笔记
11-17
首先，你需要了解Vue的基础概念，包括Vue实例、组件、指令、属性绑定、计算属性、事件处理等。Vue实例是应用的核心，你可以通过new Vue()创建一个实例，并在其中配置各种选项。组件是Vue中可复用的代码块，它们可以...
尚硅谷vue笔记·····
11-10
在`<style scoped>`中定义的样式仅对当前组件生效，防止污染全局样式表。 **总结：Todolist案例** 在Vue的Todolist案例中，组件化编码通常涉及以下步骤： - **步骤一**：根据功能拆分组件，确保组件职责单一，避免...
react 学习笔记
11-16
React 组件生命周期分为三大阶段：挂载、更新和卸载。每个阶段都有相应的生命周期方法。常见的生命周期方法包括 constructor、componentDidMount、componentDidUpdate、componentWillUnmount 等。 二、ESLint 工具 ...
02.笔记1
08-03
使用`<transition>`组件包裹需要过渡的元素，Vue会自动应用相应的CSS类。此外，还可以利用Vue的过渡钩子函数进行更精细的控制，并结合第三方动画库如animate.css使用。 总结，Vue.js提供了一套强大且灵活的工具，...
antd upload组件 手动上传
qq_50465271的博客
10-04 3913
antd 的upload组件是点开对话框后，按下确实就会上传，而且如果多选文件也会反复调用后端接口来完成上传。 因为项目需要，所以要实现手动上传，和一次性上传多个文件（调用一次后端接口） 在实现这个功能时，我翻阅了很多博客，可能是因为版本原因，很多代码都无用，最后还是通过翻阅官方文档，才最终实现。 ...
超详细！！原生js实现todolist动态页面
qq_50465271的博客
03-05 1818
刚学完js，完成这个todolist的过程十分痛苦，整理了这篇文章。里面js基本每一步都有详细解释，自我认为逻辑还是比较清晰。希望各位大佬轻喷。 在这里插入代码片 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1" />
react 项目中，简单封装axios并给请求头添加token
qq_50465271的博客
10-08 1647
在src下创建request用来封装axios import axios from "axios"; //设置请求得基准地址 axios.defaults.baseURL = '' const request = axios.create(); //设置请求头 request.interceptors.request.use(config => { // 给请求头加token的字段,值为token config.headers.token = window.sessionStorag.
react项目网页中调用摄像头相机
qq_50465271的博客
10-13 1601
最近写的项目，有一个项目需求，就是在手机端网页中调用摄像头。虽然我觉得这个功能屁用没有，但还是得想办法实现。 1.利用getUserMedia调用摄像头 navigator.mediaDevices.getUserMedia import React from 'react' import {message} from 'antd' export default function Identify() { function handlePhoto() { if (navigato
axios实例axios.all报错解决方法
qq_50465271的博客
10-09 897
博主在项目中，封装了axios，在项目里使用axios.all并发请求时，却发现报错。一搜才知道，axios.all是静态方法 解决方法：用Promise.all替代axios.all 代码: const postAround = (aroundForm)=>{ return axios({ method: 'post', url: '/fun/around/upload', data: aroundForm
hooks 简单demo 实现状态管理
qq_50465271的博客
11-22 599
reducer是一个函数(state, action) => newState：接收当前应用的state和触发的动作action，计算并返回最新的state useReducer第一个参数：reducer函数，。第二个参数：初始化的state。返回值为最新的state和dispatch函数（用来触发reducer函数，计算对应的state） import React, { createContext,useReducer } from 'react' export const ColorContex
前端下载，二进制流下载文件
qq_50465271的博客
12-09 588
首先需要下载filesever $npm install file-saver --save 安装好后直接引入使用 import { saveAs } from "file-saver"; onDownload(id) { axios({ url: `/model/down/${id}`, methor: "GET", responseType: "blob", }).then((res) => { console.log(res?.data); s
从后端接受文件流转URL
qq_50465271的博客
04-08 461
ajax一些笔记
qq_50465271的博客
11-22 410
var xmlhttp; function ajax_demo(){ //1.创建xmlHttoRequest对象 if(winodw.xmlHttpRequest){ xmlhttp = new XMLHttpRequest(); }else{ xmlhttp = new ActiveXobject("microsoft.XMLHTTP")} //2.注册回调函数 xmlhttp.onreadystatechange = function()
利用redux-reduce管理数据，数据共享
qq_50465271的博客
04-03 360
1.概念:利用redux组件之间的传值非常简单，redux里面要求我们把数据都放在一个公共的存储区域store里面，组件之中尽量少放数据，也就是所有数据都不放在组件自身了，都把它放到一个公用的存储空间里面，然后组件改变数据就不需要传递了，改变store里面的数据之后其它的组件会感知到里面的数据发生改变。这样的话不管组件的层次有多深，但是走的流程都是一样的，会把数据的传递简化很多。 2:原理图 3.代码目录 这里写目录标题一级目录二级目录三级目录containers文件夹Count组件Person组件redu
React+axios实现github搜索案例
qq_50465271的博客
03-26 269
开始页面 在输入框搜索id后，展示github中id相似的用户的头像，id。点击头像还能进入对应用户的github主页 public文件夹 bootstrap.css（略去） index.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge">
Promise笔记
qq_50465271的博客
04-23 246
promise的API 1.resolve let p1 = Promise.resolve(521); //如果传入的参数为 非promise类型的对象，则返回的结果为成功promise对象 //如果传入的参数为 Promise对象，则参数的结果决定了resolve 的结果 2.reject let ps = Pomise.reject(new Promise((resolve,reject)=>{ resolve('ok'); })) //如果传入的参数为 非promise类型的
vue 通过<component>使用组件,怎么使用子组件的方法
最新发布
05-26
在 Vue 中，通过`<component>`使用组件时，可以通过`ref`属性为子组件指定一个引用名，然后在父组件中通过`this.$refs`访问该子组件实例，从而调用该子组件的方法。 例如，在父组件中，定义一个子组件`Child...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值