react的ref属性

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

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

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

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

2.事件处理

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

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

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

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

<input  onBlur={this.handleBlur /}

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

３．强烈注意：

（１）组件内置的函数（方法）中的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 (
            <div>
            <input ref="msg" type="text"/>
            <button onClick={this.handleClick}>点击按钮提示输入数据</button>
            <input  onBlur={this.handleBlur} type="text" placeholder="失去焦点提示数据"/>
            </div>
        )
    }
}
export default Ref;

猜你喜欢