react中使用ref获取

1、react 函数组件使用useRef获取input框中的值

import React, { useRef } from "react";export default function App() {const inputVal = useRef(null)const inputValOpt = () => {console.log(inputVal.current.value)}return (<div><input type='text' ref={inputVal} /><button onClick={inputValOpt}>点击</button></div>)
}

2、react class组件ref的用法

import React, { Component } from 'react'export default class App extends Component {showData = () => {const { input1 } = this.refsconsole.log(input1.value, '点击获取');}showData2 = () => {const { input2 } = this.refsconsole.log(input2.value, '....失去焦点的时候获取')}render() {return (<div><input type="text" placeholder="点击按钮提示数据" ref="input1" />&nbsp;&nbsp;<button onClick={this.showData}>点击我提示左边的数据</button>&nbsp;&nbsp;<input type="text" placeholder="失去焦点提示数据" onBlur={this.showData2} ref="input2" />&nbsp;&nbsp;</div>)}
}

react中使用ref获取相关推荐

React中使用ref
一.如何使用ref 在React的开发模式中,通常情况下不需要.也不建议直接操作DOM原生,但是某些特殊的情况,确实需要获取到DOM进行某些操作: 管理焦点,文本选择或媒体播放: 触发强制动画: 集成 ...
react中使用jszip获取压缩包里文件的方法、Blob与Flie之间的转换
react中jszip获取压缩包里的文件方法: // react里通过npm install jszip安装 import JSZip from 'jszip'const zip = new JSZi ...
React中使用 ref 和 findDomNode
对于 React 组件来说,refs 会指向一个组件类的实例,所以可以调用该类定义的任何方法. 如果需要访问该组件的真实 DOM,可以用 ReactDOM.findDOMNode 来找到 DOM 节点 ...
React中的ref属性的使用
1. 字符串形式的ref import React, { Component } from 'react'export default class index extends Component {s ...
react中使用axios获取后台服务器数据
在react项目中获取数据的工具比较多,比如fetch axios, 这2个应该是使用最多的,说下我在使用axios 时遇到的问题吧! 我的需求是要实现,所有的数据请求统一写到一个文档里面比如get- ...
React中ref的使用方法和使用场景（详解）
摘要不管在Vue中还是React,如果我们想使用一个元素的DOM,不需要通过JS中操纵DOM的方法,它们提供了一个专属的API就是ref. 而Vue中的ref可能比较简单,这一篇主要讲一下如何在Re ...
React中如何使用ref
1.React中的ref是用来干什么的? 用来获取组件的dom对象,便于我们想要去操作dom元素 2.如何获取ref并使用 2.1.类组件(使用React.createRef()方法) import ...
在React中获取数据
React初学者经常从不需要获取数据的应用开始.他们经常面临一个计数器,任务列表获取井字棋游戏应用.这是很好的,因为在开始学习React的时候,数据获取在你的应用中添加了另一层复杂度. 然而,有些时候 ...
react中ref的使用
在react中获取真实dom的时候就需要用到ref属性,具体使用如下 var MyComponent = React.createClass({handleClick: function() {con ...

react中使用ref获取

react中使用ref获取相关推荐

最新文章

热门文章