React技术栈-组件三大属性之refs与事件处理
作者：尹正杰
版权声明：原创作品，谢绝转载！否则将追究法律责任。
一.组件的refs属性概述
组件内的标签都可以定义ref属性来标识自己 <input type="text" ref={input => this.msgInput = input}/> 回调函数在组件初始化渲染完或卸载时自动调用
在组件中可以通过this.msgInput来得到对应的真实DOM元素
作用:
通过ref获取组件内容特定标签对象, 进行读取其相关数据
二.refs实战案例
1>.HTML源代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>组件三大属性之refs</title>
</head>
<body>
<div id="box1"></div>
</body>
<script type="text/javascript" src="../js/react.development.js"></script>
<script type="text/javascript" src="../js/react-dom.development.js"></script>
<script type="text/javascript" src="../js/prop-types.js"></script>
<script type="text/javascript" src="../js/babel.min.js"></script>
<script type="text/babel">
//1>.定义组件
class MyComponent extends React.Component{
/**
*
* 温馨提示:
* 组件内置的方法中的this为组件对象
* 在组件类中自定义的方法中this为null
* 强制绑定this: 通过函数对象的bind()
* 箭头函数(ES6模块化编码时才能使用)
*
*/
constructor(props){
super(props);
this.showInput = this.showInput.bind(this);
this.handleBlur = this.handleBlur.bind(this);
}
//编写回调函数
showInput(){
const input = this.refs.content;
alert(this.input.value);
}
/*
* 编写事件处理函数
* 通过onXxx属性指定组件的事件处理函数(注意大小写)
* React使用的是自定义(合成)事件, 而不是使用的原生DOM事件
* React中的事件是通过事件委托方式处理的(委托给组件最外层的元素)
* 通过event.target得到发生事件的DOM元素对象,下面的案例"event.target"返回的就是"input"对象。
*
*/
handleBlur(event){
alert(event.target.value);
}
render(){
return(
/*
* 组件中只能返回一个标签，因此我们将所有的标签用div套起来返回
*
* 下面第一个input标签的ref说明如下:
* 使用一个回调函数(本例中也称为箭头函数)将当前的input标签绑定到组件对象("this.input")上
*
*/
<div >
<input type="text" ref={input => this.input = input}/>
<button onClick={this.showInput}>提示输入</button>
<input type="text" placeholder="失去焦点的提示内容" onBlur={this.handleBlur}/>
</div>
)
}
}
//2>.渲染组件标签
ReactDOM.render(<MyComponent />,document.getElementById("box1"))
</script>
</html>
2>.浏览器打开以上代码渲染结果
在第二个对话框输入内容，移出焦点后也会弹如下图所示的对话框。
