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必须用在【类型式的组件】才起作用,用在【函数式的组件】是无效的。

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

  1. React中Ref 的使用 React-踩坑记_05

    React中Ref 的使用 React v16.6.3 在典型的React数据流中,props是父组件与其子组件交互的唯一方式.要修改子项,请使用new props 重新呈现它.但是,在某些情况下,需 ...

  2. react中的children使用方法

    使用过vue的小伙伴都知道vue中有个slot,也就是插槽,作用就是占位,那么再react中可以使用children来替代 父组件 render(){ return( <div> < ...

  3. react中常用的一些方法

    React.createClass:创建一个ReactClass(组件类),参数是一个对象且必须带有 render 属性方法,该方法必须返回一个封闭的容器(容器内可以有其它不限结构的容器)或 null ...

  4. React中ref的用法

    在React数据流中,父子组件唯一的通信方式是通过props属性:那么如果有些场景需要获取某一个真实的DOM元素来交互,这时候就要用到React的refs属性. 1.可以给DOM元素添加ref属性 c ...

  5. React中ref的三种用法 可以用来获取表单中的值 这一种类似document.getXXId的方式

    import React, { Component } from "react" export default class MyInput extends Component { ...

  6. 实现简易版react中createElement和render方法

    function createElement(type, config, children) { // 1. 创建一个对象 // 2.根据参数config修改这个对象 // 3.把children参数 ...

  7. React中ref的使用

    直接获取DOM元素时使用的,一般情况下尽量不要使用ref

  8. react中的ref的3种方式

    2020-03-31 react中的ref的3种方式 react中ref的3种绑定方式 方式1: string类型绑定 类似于vue中的ref绑定方式,可以通过this.refs.绑定的ref的名字获 ...

  9. react中怎么写css样式?

    JSX基本语法中关于react如何写css样式主要有三种方法 1.基于class --(className) 基于className ,通过className在style中给该class名的DOM元素 ...

随机推荐

  1. Apache Spark 2.3.0 正式发布

    本章内容: 待整理 参考文献: Spark Release 2.3.0

  2. 未能加载文件或程序集"CheckRegister"或它的某一个依赖项.参数错误. (异常来

    报“未能加载文件或程序集“CheckRegister”或它的某一个依赖项.参数错误”的解决方法 问题如下所示: 未能加载文件或程序集“CheckRegister”或它的某一个依赖项.参数错误. (异常 ...

  3. 【iCore4 双核心板_FPGA】例程十二:基于UART的ARM与FPGA通信实验

    实验现象: 1.先烧写ARM程序,然后烧写FPGA程序. 2.打开串口精灵,会接收到字符GINGKO. 3.通过串口精灵发送命令可以控制ARM·LED和FPGA·LED. 核心代码: int main ...

  4. Git 审查更改

    但查看提交详细资料后,Jerry 实现字符串的长度不能为负数,所以他决定改变my_strlen函数的返回类型. Jerry 使用git日志命令来查看日志信息. [jerry@CentOS projec ...

  5. Active Directory Authentication in ASP.NET MVC 5 with Forms Authentication and Group-Based Authorization

    I know that blog post title is sure a mouth-full, but it describes the whole problem I was trying to ...

  6. linux 防火墙 ufw使用

    ufw是ubuntu是默认的防火墙配置工具,相对于iptables,ufw使用更加简单 ufw基本操作   1 []是代表可选内容,需要root权限 ufw [--dry-run] enable|di ...

  7. one-to-all及all-to-all网络通信模式

    在这两种模式下,因为 占用的通信通道非常高,形成了一个一对多的通道 甚至是多对多的通道,导致现有的fattree网络结构负载太大.

  8. Cocos2dx网络读取图片

    // // Connection.h // XXDemo // // Created by LeeHonGee on 14-9-4. // // #ifndef __XXDemo__Connectio ...

  9. SFTP编辑linux文件 ——mac sublime text2 sftp

    llinux上编辑文件总是个头疼的事儿.mac上没有nodepad++和editplus,他们都有各自支持的sftp插件,editplus比较好 自然就带了,而notepad++需要另行安装. 下面介 ...

  10. [Laravel] 12 - WEB API : cache implement

    前言 Ref: https://www.imooc.com/video/2873 服务端如何为客户端(app)的首页提供数据接口, 本篇用此作为例子演示接口的实现. 单例模式 一.三大原则 单例实现 ...