使用 ref 对已渲染到页面的节点进行标记

一、字符串形式的 ref

<input type="text" /*给标签打上标记 ipt */ ref="ipt" />

拿到标记的节点，对其进行操作

handleClick = () => {console.log(this);// 用 ref 标记了的标签，都会保存在 refs 里面console.log(this.refs); // 获取 refsconsole.log(this.refs.ipt); // 获取 refs 里面的标记，返回标记所对应的标签console.log(this.refs.ipt.value); // 获取标记标签的值
}

二、回调函数形式的 ref

handleClick = () => {const {ipt} = this; // 结构出 this 上的 iptconsole.log(ipt);
}render() {return (<div><input type="text" ref = {c => this.ipt = c {/* 此时的 c 就是 input 元素本身 */}}/> {/* this.ipt 在实例上呈现 ipt: input */}<button onClick={this.handleClick}>按钮</button></div>)
}

三、createRef 形式

// 标记节点
myRef = React.createRef();
myRef2 = React.createRef();handleClick = () => {// this.myRef 是一个对象// this.myRef.current === input 元素本身console.log(this.myRef.current.value); // 拿到当前被标记的节点的值
}render() {return (<div><input type="text" ref={this.myRef} /><button onClick={this.handleClick}>按钮</button><input type="text" ref={this.myRef2} onBlur={this.handleBlur}/></div>)
}

使用 ref 对已渲染到页面的节点进行标记相关推荐

渲染静态页面、get请求、post请求、express框架、路由、中间件
1. 渲染静态页面 const http = require('http'); const fs = require('fs'); const url = require('url'); const ...
Ant Design Pro 网络请求，视图绑定model并且渲染到页面 umi-request
封装网络请求,在service中新建接口,在model调用service,在视图绑定model并且得到网络请求的回调函数,获取网络请求的数据渲染到页面. 网络请求数据走向: 1.在utils/requ ...
python使用fpdf2包和pdfrw包在已有的PDF页面上添加新的页
python使用fpdf2包和pdfrw包在已有的PDF页面上添加新的页目录 python使用fpdf2包和pdfrw包在已有的PDF页面上添加新的页 #包安装 #新内容添加到已有的PDF页面上 # ...
elementui select组件选中后无法自动刷新更新值渲染到页面中
2019独角兽企业重金招聘Python工程师标准>>> elementui select更改选中值后,无法渲染到页面中? 在select组件中添加了@visible-change=& ...
将数据渲染到页面的几种方式
将数据渲染到页面的几种方式: 1.字符串拼接: 2.dom回流 3.文档碎片(文档碎片节点:documentFragment) 4.模板 (下章会详细介绍模板) 转载于:https:/ ...
浏览器从输入URL到页面渲染过程 ——页面渲染流程
之前我有总结过一篇经典面试题:浏览器从输入URL到页面渲染过程 ,接下里我将对某些知识点进行更细致的解析. 浏览器从输入URL到页面渲染过程系列文章: (一):浏览器从输入URL到页面渲染过程 -- ...
python渲染html页面_python接口自动化29-requests-html支持JavaScript渲染页面
前言 requests虽好,但有个遗憾,它无法加载JavaScript,当访问一个url地址的时候,不能像selenium一样渲染整个html页面出来. requests-html终于可以支持Java ...
react中将html字符串渲染到页面
在做react项目时,有时候需要将后台传过来的html的字符串变成真正的结构渲染到页面,如果直接插入的话页面显示的就是这段字符串,而不会进行转义,可以用以下方法插入,便可以html的形式展现: < ...
使用 Scrapy + Selenium 爬取动态渲染的页面
点击上方蓝字关注我们! 背景在通过scrapy框架进行某些网站数据爬取的时候,往往会碰到页面动态数据加载的情况发生,如果直接使用scrapy对其url发请求,是绝对获取不到那部分动态加载出来的数据值 ...

使用 ref 对已渲染到页面的节点进行标记

使用 ref 对已渲染到页面的节点进行标记相关推荐

最新文章

热门文章