每个项目产品都要加埋点,加500行埋点是不是会占用你一两天的时间而且很容易犯错,想只用一小时准确加完这500行埋点剩下一天喝茶聊天么?来试试这520web工具, 高效加埋点,目前我们公司100号前端都在用,因为很好用,所以很自然普及开来了,推荐给大家吧
自己开发所以免费,埋点越多越能节约时间,点两下埋点就加上了,还不会犯错,里面有使用视频,反正免费 😄
1.refs属性
1). 组件内的标签都可以定义ref属性来标识自己 类似id
例如<input ref='username'>则 this.refs.username 返回input对象
2). 在组件中可以通过this.refs.refName来得到对应的真实DOM对象
3). 作用: 用于操作指定的ref属性的dom元素对象(表单标签居多)
2. 事件处理
1). 通过onXxx属性指定组件的事件处理函数(注意大小写)
React使用的是自定义(合成)事件, 而不是使用的DOM事件
React中的事件是通过委托方式处理的(委托给组件最外层的元素)
2). 通过event.target得到发生事件的DOM元素对象
<input onFocus={this.handleClick}/>
handleFocus(event) {
event.target //返回input对象}
3. 强烈注意
1). 组件内置的方法中的this为组件对象
2). 在组件中自定义的方法中的this为null
强制绑定this
箭头函数(ES6模块化编码时才能使用)
4. 问题: 如何给一个函数强制指定内部的this?
例题
需求: 自定义组件, 功能说明如下:
1. 界面如果页面所示
2. 点击按钮, 提示第一个输入框中的值
3. 当第2个输入框失去焦点时, 提示这个输入框中的值例题
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>component_refs</title>
</head>
<body>
<div id="example"></div>
<script src="js/react.js"></script>
<script src="js/react-dom.js"></script>
<script src="js/babel.min.js"></script>
<script type="text/babel">
class MyComponent extends React.component {
constructor(props){
super(props);
this.handleClick = this.handleClick.bind(this);//强制绑定this
}
render(){
return(
<div>
<input type="text" ref="msg"/>
<button onClick={this.handleClick}>提示输入数据</button>//或者onClick={this.handleClick.bind(this)}
<input type="text" placeholder="失去焦点提示数据"/>
</div>
CC
}
}
handleClick(event){
var input = this.refs.msg;
alert(input.value);
}
ReactDOM.render(<MyComponent/>,document.getElementById("example") )
</script>
</body>
</html>