react的ref属性

1.组件的三大属性之二:ref属性

(1)组件内的标签都可以定义ref属性来标识自己

(2)在组件内可以通过this.refs.refName找到对应的真实DOM对象

*<input ref="msg" type="text"/>
*this.refs.msg//返回input对象

2.事件处理

(1)通过onXxx属性指定组件的事件处理函数(注意大小写)

    *React使用的是自定义事件,而不是标准DOM事件

    *React的事件是通过委托方式处理的,委托给组件最外层的元素

(2)事件的回调函数都有event对象,通过event.target找到触发事件的目标对象

<input  onBlur={this.handleBlur /}

this.handleBlur(event){
event.target//返回的是input对象
}

3.强烈注意:

(1)组件内置的函数(方法)中的this指向的是实例对象

(2)组件自定义函数(方法)中的this指向的是null

      *给自定义函数强制绑定this的当前执行环境

   this.handleClick = this.handleClick.bind(this);

      *箭头函数(ES6模块化编程时才能使用)

import React, { Component } from 'react';

class Ref extends Component{
    constructor(props) {
        super(props);
        console.log(this);
        this.handleClick = this.handleClick.bind(this);
    }
    handleBlur(event){
        console.log(event);
        alert(event.target.value);
    }

    handleClick(){
       //获得input输入的内容
       console.log(this);//this指向的是null
       let value = this.refs.msg.value;
       alert(value);
   }
    render(){
       console.log(this);
        return (
            <div>
            <input ref="msg" type="text"/>
            <button onClick={this.handleClick}>点击按钮提示输入数据</button>
            <input  onBlur={this.handleBlur} type="text" placeholder="失去焦点提示数据"/>
            </div>
        )
    }
}
export default Ref;

 

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值