React中的ref属性的使用

1. 字符串形式的ref

import React, { Component } from 'react'export default class index extends Component {showData = () => {// 获取input节点const { inputRef } = this.refs// 输出input值console.log(inputRef.value);}render() {return (<div><input ref="inputRef" type="text" placeholder="点击按钮提示数据"/>&nbsp;<button onClick={ this.showData }>点我提示输入框值</button></div>)}
}

2. create形式的ref

import React, { Component } from 'react'export default class index extends Component {// React.createRef调用后返回一个容器，存储被ref标识的节点，单一使用。也就是说，没定义一个ref就要调用一次React.createRefinputRef = React.createRef()showData = () => {const refVal = this.inputRef.currentconsole.log(refVal.value);}render() {return (<div><input ref={ this.inputRef } type="text" placeholder="点击按钮提示数据"/>&nbsp;<button onClick={ this.showData }>点我提示输入框值</button></div>)}
}

3. 回调函数形式的ref

import React, { Component } from 'react'export default class index extends Component {showData = () => {const { inputRef } = thisconsole.log(inputRef.value);}render() {return (<div>{/* 这里传入一个回调函数 */}<input ref={ currentNode => this.inputRef = currentNode } type="text" placeholder="点击按钮提示数据"/>&nbsp;<button onClick={ this.showData }>点我提示输入框值</button></div>)}
}

总结：

综合以上三种形式各有优缺点，方式1与方式2写起来比较方便但是比较繁琐，方式三通过传入一个回调函数，不但简化了操作还不失优雅，显得代码逼格高些，但在最新版及以后的版本中，React官方使用函数式编程，所以更推荐使用create形式的ref。

React中的ref属性的使用相关推荐

Vue 中的 ref 属性详解
Vue 中的 ref 属性详解我们先来读一下vue的官方文档我们来分析官方文档首先ref的引用是相当于一个DOM节点(如果是子组件则指向的是其实例),而且是一个string类型的值. 通俗的将就 ...
React中的“计算属性”
React中的"计算属性" 相信许多学习过vue的小伙伴对计算属性都不陌生吧.计算属性能帮我们数据进行一些计算操作,计算属性是依赖于data里面的数据的,在vue中只要计算属性依赖 ...
vue中的ref属性
vue中的ref属性使用vue开发时经常会用到ref属性,ref属性有什么作用呢?我刚开始用的时候发现这个属性有点鸡肋,总是感觉可有可无,但是随着不断的使用vue,慢慢地发现它的作用还是挺重要的 ...
React中使用ref
一.如何使用ref 在React的开发模式中,通常情况下不需要.也不建议直接操作DOM原生,但是某些特殊的情况,确实需要获取到DOM进行某些操作: 管理焦点,文本选择或媒体播放: 触发强制动画: 集成 ...
vue中通过ref属性来获取dom的引用
ref属性可以用来获取dom的引用,它的值可以随便定义, 但是注意这个名字不要和页面中其他的ref属性名相同,获取定义的ref可以通过this.$refs.ref的名字 <div id=&quo ...
react中使用ref获取
1.react 函数组件使用useRef获取input框中的值 import React, { useRef } from "react";export default funct ...
React中使用 ref 和 findDomNode
对于 React 组件来说,refs 会指向一个组件类的实例,所以可以调用该类定义的任何方法. 如果需要访问该组件的真实 DOM,可以用 ReactDOM.findDOMNode 来找到 DOM 节点 ...
React中如何使用ref
1.React中的ref是用来干什么的? 用来获取组件的dom对象,便于我们想要去操作dom元素 2.如何获取ref并使用 2.1.类组件(使用React.createRef()方法) import ...
React中ref的使用方法和使用场景（详解）
摘要不管在Vue中还是React,如果我们想使用一个元素的DOM,不需要通过JS中操纵DOM的方法,它们提供了一个专属的API就是ref. 而Vue中的ref可能比较简单,这一篇主要讲一下如何在Re ...

React中的ref属性的使用

React中的ref属性的使用相关推荐

最新文章

热门文章