React组件三大属性之 refs
React组件三大属性之 refs
refs属性
1) 组件内的标签都可以定义ref属性来标识自己
a. <input type="text" ref={input => this.msgInput = input}/>
b. 回调函数在组件初始化渲染完或卸载时自动调用
2) 在组件中可以通过this.msgInput来得到对应的真实DOM元素
3) 作用: 通过ref获取组件内容特定标签对象, 进行读取其相关数据
事件处理
1) 通过onXxx属性指定组件的事件处理函数(注意大小写)
a. React使用的是自定义(合成)事件, 而不是使用的原生DOM事件
b. React中的事件是通过事件委托方式处理的(委托给组件最外层的元素)
2) 通过event.target得到发生事件的DOM元素对象
<input onFocus={this.handleClick}/>
handleFocus(event) {
event.target //返回input对象
}
强烈注意
1) 组件内置的方法中的this为组件对象
2) 在组件类中自定义的方法中this为null
a. 强制绑定this: 通过函数对象的bind()
b. 箭头函数(ES6模块化编码时才能使用)
例子:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="../js/react.development.js"></script>
<script src="../js/react-dom.development.js"></script>
<script src="../js/babel.min.js"></script>
<script src="../js/prop-types.js"></script>
</head>
<body>
<div id="test"></div> <script type="text/babel">
/*
需求: 自定义组件, 功能说明如下:
1. 界面如果页面所示
2. 点击按钮, 提示第一个输入框中的值
3. 当第2个输入框失去焦点时, 提示这个输入框中的值
*/
//1、定义组件
class MyComponent extends React.Component {
constructor(props) {
super(props) // 调用父类(Component)的构造函数 // 将自定义的函数强制绑定为组件对象
this.handleClick = this.handleClick.bind(this) // 将返回函数中的this强制绑定为指定的对象, 并没有改变原来的函数中的this
this.handleBlur = this.handleBlur.bind(this) // 将返回函数中的this强制绑定为指定的对象, 并没有改变原来的函数中的this
} handleClick(){
//官方不建议这么写
const input = this.refs.content
alert(input.value)
//建议这么搞
alert(this.x.value)
} handleBlur(event){
alert(event.target.value)
} render() {
return (
<div>
<input type="text" ref="content"/>{' '}
<input type="text" ref={x => this.x = x}/>{' '}
<button onClick={this.handleClick}>提示输入数据</button>{' '}
<input type="text" placeholder="失去焦点提示数据" onBlur={this.handleBlur}/>
</div>
)
}
} //2、渲染组件标签
ReactDOM.render(<MyComponent/>,document.getElementById('test')) </script>
</body>
</html>
React组件三大属性之 refs的更多相关文章
- React组件三大属性之 props
React组件三大属性之 props 理解1) 每个组件对象都会有props(properties的简写)属性2) 组件标签的所有属性都保存在props中 作用1) 通过标签属性从组件外向组件内传递变 ...
- React组件三大属性之state
React组件三大属性之state 组件被称为"状态机", 页面的显示是根据组件的state属性的数据来显示 理解1) state是组件对象最重要的属性, 值是对象(可以包含多个数 ...
- react的三大属性
react的三大属性 state props refs props 来自外部属性 states 来自内部状态 refs 用于表示组件内某个元素 state基础(最重要的属性) state是组件对象最 ...
- React组件的属性
组件的三大属性 state props refs 写组件的要求: 1>组件必须大写 2>组件必须只有一个根元素 state是组件的重要对象 值可以是对象 组件被称之为 状态机 通过跟新组件 ...
- 08_组件三大属性(2)_props
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...
- 09_组件三大属性(3)_refs和事件处理
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 07_组件三大属性(1)_state
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- React 三大属性state,props,refs以及组件嵌套的应用
React 三大属性state,props,refs以及组件嵌套的应用 该项目实现了一个简单的表单输入添加列表的内容 代码如下 <!DOCTYPE html> <html> & ...
- 组件的三大属性state,props,refs与事件处理
组件的三大属性state state是组件对象最重要的属性, 值是对象(可以包含多个数据),组件被称为"状态机", 通过更新组件的state来更新对应的页面显示(重新渲染组件) 初 ...
随机推荐
- MegEngine计算图、MatMul优化解析
MegEngine计算图.MatMul优化解析 本文针对天元在推理优化过程中所涉及的计算图优化与 MatMul 优化进行深度解读,希望能够帮助广大开发者在利用天元 MegEngine「深度学习,简单开 ...
- TensorFlow简单线性回归
TensorFlow简单线性回归 将针对波士顿房价数据集的房间数量(RM)采用简单线性回归,目标是预测在最后一列(MEDV)给出的房价. 波士顿房价数据集可从http://lib.stat.cmu.e ...
- Win10 下python_appium的Android手机自动化环境搭建
前提: 已经安装好了Java环境,且配置了环境变量 已经安装python3.8.2,已经安装pycham. 一.安装appium_client ,pycham中也需要安装 二.安装node.js(需要 ...
- Django(60)Django内置User模型源码分析及自定义User
前言 Django为我们提供了内置的User模型,不需要我们再额外定义用户模型,建立用户体系了.它的完整的路径是在django.contrib.auth.models.User. User模型源码分析 ...
- SQL注入问题------JDBC编写简单登录代码
一.什么是sql注入 sql注入:用户输入的内容, 有一些sql的特殊关键字参与字符串的拼接,完成了一条逻辑发生变化的新的SQL语句 !用代码举个例子简单说明一下: package cn.zhbit. ...
- 剑指 Offer 06. 从尾到头打印链表
链接:https://leetcode-cn.com/problems/cong-wei-dao-tou-da-yin-lian-biao-lcof/ 标签:链表 题目 输入一个链表的头节点,从尾到头 ...
- 【NX二次开发】移动WCS坐标系
说明:移动WCS坐标系 用法: #include <uf.h> #include <uf_csys.h> extern DllExport void ufusr(char *p ...
- 无法在源“”处找到包“entityframework”
当在程序包管理器控制台安装ef时出现这个 出现这种情况可能是程序包源不对 我的是由于之前项目的源有一个内网平台的,把这个取消勾选就能安装成功了 上图设置路径为工具-NuGet包管理器-管理解决方案的N ...
- Vue.js的基础学习
Vue.js的基础网上很多,这里不记录 开始正式页面的开发 1.页面加载时请求数据 methods: { post() { //发送post请求 this.$http.post('../../ashx ...
- .Net Core 3.1简单搭建微服务
学如逆水行舟,不进则退!最近发现微服务真的是大势所趋,停留在公司所用框架里已经严重满足不了未来的项目需要了,所以抽空了解了一下微服务,并进行了代码落地. 虽然项目简单,但过程中确实也学到了不少东西. ...