React中ref的使用方法

React中ref的使用方法

  在react典型的数据流中,props传递是父子组件交互的唯一方式;通过传递一个新的props值来使子组件重新re-render,从而达到父子组件通信。当然,就像react官网所描述的一样,在react典型的数据量之外,某些情况下(例如和第三方的dom库整合,或者某个dom元素focus等)为了修改子组件我们可能需要另一种方式,这就是ref方式。

1.ref有两种使用方法:

1)回调函数

标签中:<input type="text" className="form-control" ref={ref => this.name = ref}/>

使用:let name=this.name.value;

2)字符串

标签中:<input type="text" className="form-control" ref="name"/>

使用:let name=this.refs.name.value;

2.三种触发回调函数的时机:

1)组件被渲染后

2)组件被卸载后

3)ref改变后

3.注:

  使用ref必须用在【类型式的组件】才起作用,用在【函数式的组件】是无效的。

原文地址:https://www.cnblogs.com/Michelle20180227/p/9258992.html

时间: 2024-11-08 09:17:39

React中ref的使用方法的相关文章

react中的children使用方法

使用过vue的小伙伴都知道vue中有个slot,也就是插槽,作用就是占位,那么再react中可以使用children来替代 父组件 render(){ return( <div> <Grid> 我将被传递到Grid组件中 </Grid> </div> ) } 子组件 export default class Grid extends React.Component { render() { return ( <div>{this.props.ch

React中ref的使用

// oneOfType 多选一,接收一个数组. 可以用e.target获取一个DOM元素. 也可以用ref来获取DOM元素. ref={ (input) => {this.input = input} } this.input 指向的是=右边的input ->参数 (input) ->input DOM元素. e.targe可以用this.input去代替. 不建议使用ref. 例如获取ul的长度: ul有一个元素时,但是长度确是0.  因为setState方法是一个异步函数,有的时候

关于vue中ref的使用方法

之前在项目中会通过ref在父子组件传递一些数据,但是具体ref的其他用法并没有深究,所以来了解一下ref的具体使用方法 first: <div ref="hello"> <!-- 绑定了data里面的值并渲染到页面--> <h1 v-model="msg">{{msg}}</h1> </div>//在方法或者生命周期的函数中获取数据 console.log(this.$refs.hello.innerTex

React 中使用CSS的方法

不需要组件从外部引入css文件,直接在组件中书写. import React, { Component } from "react";const div1 = { width: "300px", margin: "30px auto", backgroundColor: "#44014C", //驼峰法 minHeight: "200px", boxSizing: "border-box"

react中的ref的3种方式

2020-03-31 react中ref的3种绑定方式 方式1: string类型绑定 类似于vue中的ref绑定方式,可以通过this.refs.绑定的ref的名字获取到节点dom 注意的是 这种方式已经不被最新版的react推荐使用,有可能会在未来版本中遗弃 方式2: react.CreateRef() 通过在class中使用React.createRef()方法创建一些变量,可以将这些变量绑定到标签的ref中 那么该变量的current则指向绑定的标签dom 方式3: 函数形式 在clas

React 中的 AJAX 请求:获取数据的方法

React 中的 AJAX 请求:获取数据的方法 React 只是使用 props 和 state 两处的数据进行组件渲染. 因此,想要使用来自服务端的数据,必须将数据放入组件的 props 或 state 中. 首先引入 axios. 1.`import axios from 'axios';` constructor 方法非常标准,调用 super,然后初始化 state,设置一个空的 posts 数 传入新的 posts 数组,使用 this.setState 方法更新组件状态.这会导致重

33.C#--方法中ref参数的使用

static void Main(string[] args){//方法中ref参数的使用,不考虑实用性,只讲ref使用方法//用ref实现奖金+500double salary = 5000;JiangJin(ref salary); //传实参Console.WriteLine("这个月的总工资是:{0}", salary);Console.ReadKey(); } public static void JiangJin(ref double s) //ref有自动返回功能 { s

在react中引入highcharts方法

Highchart在react中引入的方法为: 1.安装相关依赖 npm install  highcharts Npm install highcharts-react-offical 2.在相关模块引入: Import Hightcharts from ‘highcharts’ Import HightchartsReact from ‘highcharts-react-offical’ 如果需要某些特殊模块,则需要引入: Import highcharts3d from ‘highchar

react 使用 ref 报错 ,[eslint] Using string literals in ref attributes is deprecated. (react/no-string-refs)

react 项目中给指定元素加事件,使用到 react 的 ref 属性,Eslink 报错 [eslint] Using string literals in ref attributes is deprecated. (react/no-string-refs) 常用方法:(会报错) var Hello = createReactClass({ componentDidMount: function() { var component = this.refs.hello; // ...do