React学习（三）refs属性

最新推荐文章于 2023-11-22 23:30:09 发布

飞翔的熊blabla

最新推荐文章于 2023-11-22 23:30:09 发布

阅读量212

点赞数 1

分类专栏： react

原文链接：http://www.520webtool.com/

版权

react 专栏收录该内容

115 篇文章 2 订阅

订阅专栏

每个项目产品都要加埋点，加500行埋点是不是会占用你一两天的时间而且很容易犯错,想只用一小时准确加完这500行埋点剩下一天喝茶聊天么？来试试这520web工具, 高效加埋点，目前我们公司100号前端都在用，因为很好用，所以很自然普及开来了，推荐给大家吧

http://www.520webtool.com/

自己开发所以免费，埋点越多越能节约时间，点两下埋点就加上了，还不会犯错，里面有使用视频，反正免费 😄

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>

飞翔的熊blabla

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
React学习（三）refs属性

1.refs属性1). 组件内的标签都可以定义ref属性来标识自己类似id例如<input ref='username'>则 this.refs.username 返回input对象2). 在组件中可以通过this.refs.refName来得到对应的真实DOM对象3). 作用: 用于操作指定的ref属性的dom元素对象(表单标签居多)2. 事件处理1). 通过onXxx...
复制链接

扫一扫