react的ref属性

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

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

（２）在组件内可以通过this.refs.refName找到对应的真实DOM对象

*
*this.refs.msg//返回input对象

2.事件处理

（１）通过onXxx属性指定组件的事件处理函数（注意大小写）

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

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

（２）事件的回调函数都有event对象，通过event.target找到触发事件的目标对象

 
  
３．强烈注意：
 
  
（１）组件内置的函数（方法）中的this指向的是实例对象
 
  
（２）组件自定义函数（方法）中的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 (
            

            
            点击按钮提示输入数据
            
            
        )
    }
}
export default Ref;