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必须用在【类型式的组件】才起作用,用在【函数式的组件】是无效的。
React中ref的使用方法的更多相关文章
- React中Ref 的使用 React-踩坑记_05
React中Ref 的使用 React v16.6.3 在典型的React数据流中,props是父组件与其子组件交互的唯一方式.要修改子项,请使用new props 重新呈现它.但是,在某些情况下,需 ...
- react中的children使用方法
使用过vue的小伙伴都知道vue中有个slot,也就是插槽,作用就是占位,那么再react中可以使用children来替代 父组件 render(){ return( <div> < ...
- react中常用的一些方法
React.createClass:创建一个ReactClass(组件类),参数是一个对象且必须带有 render 属性方法,该方法必须返回一个封闭的容器(容器内可以有其它不限结构的容器)或 null ...
- React中ref的用法
在React数据流中,父子组件唯一的通信方式是通过props属性:那么如果有些场景需要获取某一个真实的DOM元素来交互,这时候就要用到React的refs属性. 1.可以给DOM元素添加ref属性 c ...
- React中ref的三种用法 可以用来获取表单中的值 这一种类似document.getXXId的方式
import React, { Component } from "react" export default class MyInput extends Component { ...
- 实现简易版react中createElement和render方法
function createElement(type, config, children) { // 1. 创建一个对象 // 2.根据参数config修改这个对象 // 3.把children参数 ...
- React中ref的使用
直接获取DOM元素时使用的,一般情况下尽量不要使用ref
- react中的ref的3种方式
2020-03-31 react中的ref的3种方式 react中ref的3种绑定方式 方式1: string类型绑定 类似于vue中的ref绑定方式,可以通过this.refs.绑定的ref的名字获 ...
- react中怎么写css样式?
JSX基本语法中关于react如何写css样式主要有三种方法 1.基于class --(className) 基于className ,通过className在style中给该class名的DOM元素 ...
随机推荐
- Apache Spark 2.3.0 正式发布
本章内容: 待整理 参考文献: Spark Release 2.3.0
- 未能加载文件或程序集"CheckRegister"或它的某一个依赖项.参数错误. (异常来
报“未能加载文件或程序集“CheckRegister”或它的某一个依赖项.参数错误”的解决方法 问题如下所示: 未能加载文件或程序集“CheckRegister”或它的某一个依赖项.参数错误. (异常 ...
- 【iCore4 双核心板_FPGA】例程十二:基于UART的ARM与FPGA通信实验
实验现象: 1.先烧写ARM程序,然后烧写FPGA程序. 2.打开串口精灵,会接收到字符GINGKO. 3.通过串口精灵发送命令可以控制ARM·LED和FPGA·LED. 核心代码: int main ...
- Git 审查更改
但查看提交详细资料后,Jerry 实现字符串的长度不能为负数,所以他决定改变my_strlen函数的返回类型. Jerry 使用git日志命令来查看日志信息. [jerry@CentOS projec ...
- 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 ...
- linux 防火墙 ufw使用
ufw是ubuntu是默认的防火墙配置工具,相对于iptables,ufw使用更加简单 ufw基本操作 1 []是代表可选内容,需要root权限 ufw [--dry-run] enable|di ...
- one-to-all及all-to-all网络通信模式
在这两种模式下,因为 占用的通信通道非常高,形成了一个一对多的通道 甚至是多对多的通道,导致现有的fattree网络结构负载太大.
- Cocos2dx网络读取图片
// // Connection.h // XXDemo // // Created by LeeHonGee on 14-9-4. // // #ifndef __XXDemo__Connectio ...
- SFTP编辑linux文件 ——mac sublime text2 sftp
llinux上编辑文件总是个头疼的事儿.mac上没有nodepad++和editplus,他们都有各自支持的sftp插件,editplus比较好 自然就带了,而notepad++需要另行安装. 下面介 ...
- [Laravel] 12 - WEB API : cache implement
前言 Ref: https://www.imooc.com/video/2873 服务端如何为客户端(app)的首页提供数据接口, 本篇用此作为例子演示接口的实现. 单例模式 一.三大原则 单例实现 ...