react学习——10react中ref属性

最新推荐文章于 2024-09-02 21:54:42 发布
最新推荐文章于 2024-09-02 21:54:42 发布
阅读量271 收藏
点赞数 3
分类专栏： react 文章标签： react.js 学习 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ChenJin_2/article/details/139918082
版权

1、字符串形式的ref

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <!--    移动端适配-->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>1_字符串形式的ref.html</title>
</head>
<body>
<!--准备一个容器-->
<div id="root"></div>
<!--引入react核心库-->
<script type="text/javascript" src="../js/react.development16.2.0.js"></script>
<!--引入react-dom.js库,用于支持react操作DOM-->
<script type="text/javascript" src="../js/react-dom.development.js"></script>
<!--引入babel，用于jsx的转换jsx-->
<script type="text/javascript" src="../js/babel.min.js"></script>
<script type="text/babel">/*此处一定要写babel*/
    class Demo extends React.Component{
        //自定义方法-要用赋值语句的形式+箭头函数
        showData= ()=>{
            console.log("aaa")
            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="btn" onClick={this.showData}>点我提示左侧的数据</button>&nbsp;
                    <input ref="input2" onBlur={this.showData2}  type="text" placeholder="失去焦点提示数据"/>
                </div>
                )
        }
    }
    ReactDOM.render(<Demo/>,document.getElementById('root'))
</script>
</body>
</html>

2、回调形式的ref

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <!--    移动端适配-->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>2_回调形式的ref.html</title>
</head>
<body>
<!--准备一个容器-->
<div id="root"></div>
<!--引入react核心库-->
<script type="text/javascript" src="../js/react.development16.2.0.js"></script>
<!--引入react-dom.js库,用于支持react操作DOM-->
<script type="text/javascript" src="../js/react-dom.development.js"></script>
<!--引入babel，用于jsx的转换jsx-->
<script type="text/javascript" src="../js/babel.min.js"></script>
<script type="text/babel">/*此处一定要写babel*/
    class Demo extends React.Component{
        //自定义方法-要用赋值语句的形式+箭头函数
        showData= ()=>{
            const {input1}=this
            alert(input1.value)
        }
        showData2=()=>{
            const {input2} = this.refs
            alert(input2.value)
        }
        render(){
            return(
                <div>
                    <input ref={c=>this.input1 = c} type="text" placeholder="点击按钮提示数据"/>&nbsp;
                        <button ref="btn" onClick={this.showData}>点我提示左侧的数据</button>&nbsp;
                    <input onBlur={this.showData2} ref={c=>this.input2 = c} type="text" placeholder="点击按钮提示数据"/>&nbsp;
                </div>
                )
        }
    }
    ReactDOM.render(<Demo/>,document.getElementById('root'))
</script>
</body>
</html>

3、回调ref中回调次数问题

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <!--    移动端适配-->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>3_回调ref中回调次数问题.html</title>
</head>
<body>
<!--准备一个容器-->
<div id="root"></div>
<!--引入react核心库-->
<script type="text/javascript" src="../js/react.development16.2.0.js"></script>
<!--引入react-dom.js库,用于支持react操作DOM-->
<script type="text/javascript" src="../js/react-dom.development.js"></script>
<!--引入babel，用于jsx的转换jsx-->
<script type="text/javascript" src="../js/babel.min.js"></script>
<script type="text/babel">/*此处一定要写babel*/
    class Demo extends React.Component{

        state={
            isHot:true
        }
        showData = ()=>{
            const {input1} = this;
            alert(input1.value)
        }
        changeWeather = ()=>{
            const {isHot} = this.state;
            this.setState({
                isHot:!isHot
            })
        }
        saveInput = (c)=>{
            this.input1 = c;
            console.log('@', c)
        }
        render(){
            const {isHot} = this.state;
            return(
                <div>
                    <h1>今天天气很{isHot ? '炎热' : '凉爽'}</h1>
                    {/*<input ref={c => {
                        this.input1 = c;
                        console.log('@', c)
                    }} type="text" placeholder="点击按钮提示数据"/>&nbsp;<br/>*/}
                    <input ref={this.saveInput} type="text" placeholder="点击按钮提示数据"/>&nbsp;<br/>
                    <button ref="btn" onClick={this.showData}>点我提升输入数据</button>
                    &nbsp;
                    <br/>
                    <button onClick={this.changeWeather}>点位切换天气</button>
                </div>
            )
        }
    }
ReactDOM.render(<Demo/>, document.getElementById('root'))
</script>
</body>
</html>

4、createRef的使用（官方推荐）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <!--    移动端适配-->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>4_createRef.html</title>
</head>
<body>
<!--准备一个容器-->
<div id="root"></div>
<!--引入react核心库-->
<script type="text/javascript" src="../js/react.development16.3.1.js"></script>
<!--引入react-dom.js库,用于支持react操作DOM-->
<script type="text/javascript" src="../js/react-dom.development16.3.1.js"></script>
<!--引入babel，用于jsx的转换jsx-->
<script type="text/javascript" src="../js/babel.min.js"></script>
<script type="text/babel">/*此处一定要写babel*/
    class Demo extends React.Component{
        constructor() {
            super();
        }
        //React.createRef()创建一个容器，该容器可以存储被ref所标识的节点
        myRef = React.createRef()
        myRef2 = React.createRef()
        //自定义方法-要用赋值语句的形式+箭头函数
        showData= ()=>{
           console.log(this.myRef.current.value)
        }
        showData2=()=>{
            console.log(this.myRef2.current.value)
        }
        render(){
            return(
                <div>
                    <input ref={this.myRef} type="text" placeholder="点击按钮提示数据"/>&nbsp;
                        <button ref="btn" onClick={this.showData}>点我提示左侧的数据</button>&nbsp;
                    <input onBlur={this.showData2} ref={this.myRef2} type="text" placeholder="点击按钮提示数据"/>&nbsp;
                </div>
                )
        }
    }
    ReactDOM.render(<Demo/>,document.getElementById('root'))
</script>
</body>
</html>
一叶飘零晋
关注
  • 3
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
react-由社区整理的React钩子集合
08-14
"react-由社区整理的React钩子集合"是一个专门为React开发者收集和整理的各种实用钩子的资源，旨在帮助开发者更高效地利用React的新特性——React Hooks。React Hooks的引入，使得在函数组件中可以方便地使用状态、...
bootcamp-react:训练营React学习笔记
04-03
6. 前向引用与后向引用：在React中，通过ref属性可以获取到DOM元素或自定义组件的实例，这在需要直接操作DOM或调用组件方法时非常有用。 7. React Hooks：自React 16.8版本引入，Hooks如useState、useEffect和...
react-类似LinkedState但用于Refs支持Preact与React
08-14
`refs`在React中是一种特殊的属性，可以让我们在组件的生命周期方法中获取到真实DOM元素或函数组件的实例。这通常用于直接操作DOM，例如获取输入值、调用自定义方法等。而在Preact中，`refs`的工作方式与React基本...
数字React
02-08
"数字React"是一个主题，可能指的是在React框架中处理和显示数字相关的内容，尤其是在构建复杂的用户界面时。React是Facebook开发的一个开源JavaScript库，用于构建用户界面，特别是单页应用程序。它采用组件化的...
React-GooeyMenu:基于 codrops 演示的粘性菜单
06-10
React-GooeyMenu是一个基于React库的组件，它实现了灵感来源于Codrops的创新设计——粘性菜单。这个组件主要用于创建一种交互式、视觉吸引人的菜单，当用户滚动页面时，菜单会呈现出“粘性”效果，即在页面的某个...
如何使用useMemo来优化React组件的性能？
盼盼盼的博客
09-02 353
是 React 提供的一个 Hook，它可以用来记忆复杂计算的结果，避免在每次渲染时都进行重复计算，从而优化组件的性能。并不保证所记忆的值不会被丢弃。在React的将来的重渲染过程中，可能会清除这些值以释放内存。主要用于性能优化，而不是作为缓存机制。变化时，才会重新计算。
react.js
只会写bug
08-29 1171
一、create-react-app 全局安装create-react-app $ npm install -g create-react-app 创建一个项目 $ create-react-app your-app 注意命名方式 Creating a new React app in /dir/your-app. Installing packages. This might take a couple of minutes. 安装过程较慢， Installing react, react-dom,
React基础面试题
只会写bug
08-30 1187
Router 用于定义多个路由，当用户定义特定的 URL 时，如果此 URL 与 Router 内定义的任何 “路由” 的路径匹配，则用户将重定向到该特定路由。这可以提高应用程序的性能。它是一个有助于存储对特定的 React 元素或组件的引用的属性，它将由组件渲染配置函数返回。高阶组件是重用组件逻辑的高级方法，是一种源于 React 的组件模式。React 路由是一个构建在 React 之上的强大的路由库，它有助于向应用程序添加新的屏幕和流。状态是 React 组件的核心，是数据的来源，必须尽可能简单。
react vant 在使用dialog.confirm取消报错 Uncaught (in promise) undefined
weixin_44565776的博客
08-29 686
react vant Dialog使用过程中，报错问题
《React Hooks：让你的组件更灵活》
Envyᥫᩣ的博客
08-29 888
Hooks 是 React 16.8 新增的功能，它允许你在不编写 class 的情况下使用 state 以及其他 React 特性。Hooks 的出现是为了让函数组件变得更加强大，同时也保持代码的简洁性和可读性。
技术周刊 ｜ Rspack 1.0、v0 支持 Vue、2024 年度编程语言排行榜、Ideogram 2.0、从 0 实现一个 React
最新发布
童欧巴的博客
09-02 436
大家好，我是童欧巴，欢迎来到第 124 期技术周刊。
微信小程序自定义相机（React+Taro）
weixin_45392204的博客
09-02 254
【代码】微信小程序自定义相机（React+Taro）
React 入门第九天：与后端API的集成与数据管理
Caleb的博客
09-02 380
在React学习的第九天，我集中学习了如何与后端API进行集成。这一步是将静态的React应用转变为动态、可交互的关键。通过与后端通信，我们可以从服务器获取数据、发送用户输入以及处理复杂的业务逻辑。
react 样式和vue样式的区别
weixin_44565776的博客
08-29 418
react 和vue 样式使用注意事项
react 列表页面中管理接口请求的参数
Misnice的博客
08-29 515
react 列表页面中管理接口请求的参数
React中实现antd自定义图标，鼠标悬浮变色
在下魔王ii的博客
08-29 422
借助 antd 的 tooltip组件来实现 hover 时变色的效果。
关于VUE3开发频繁引入ref，reactive，computed等基础函数。
m0_58889179的博客
08-29 437
利用unplugin-auto-import插件可以避免频繁引入ref，reactive，computed等基础函数。1.安装unplugin-auto-import依赖。2.在vite.config.ts中注入依赖。
【react】开发一些简单的业务表单可复用组件，需要注意哪些细节
hzxOnlineOk的博客
09-02 392
组件将提供给很多后续复用的业务使用，因此足够清晰的属性及值类型可以清晰的告知业务，减少不必要的沟通成本。
【React】useEffect的使用场景与作用
Jerryqjr的博客
08-29 594
useEffect是 React 中的一个 Hook，用于在函数组件中执行副作用。副作用是指那些与渲染过程无关的操作，比如数据获取、订阅事件、手动操作 DOM、日志记录等。useEffect允许你在函数组件中引入这些副作用，而不必依赖于类组件的生命周期方法（如和。
react 父子传值_React学习——通过模态框中的表单学习父子组件之间传值
05-17
React中父组件向子组件传值可以通过props实现，而子组件向父组件传值可以通过回调函数实现。 假设我们有一个父组件Modal，其中包含一个子组件Form，我们希望在Form表单中填写完数据后，将数据传递给Modal组件进行...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

一叶飘零晋

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值