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;