React（三）属性 refs

最新推荐文章于 2023-08-17 22:44:44 发布

李不烦

最新推荐文章于 2023-08-17 22:44:44 发布

阅读量161

点赞数

分类专栏： JavaScript 文章标签： refs

本文链接：https://blog.csdn.net/LWYYYYYY/article/details/100679019

版权

JavaScript 专栏收录该内容

67 篇文章 1 订阅

订阅专栏

组件实例对象的3大属性之二: refs属性

1). 组件内的标签都可以定义ref属性来标识自己
2). 在组件中可以通过this.refs.refName来得到对应的真实DOM对象
3). 作用: 用于操作指定的ref属性的dom元素对象(表单标签居多)
* <input ref='username' />
* this.refs.username //返回input对象

事件处理

1). 通过onXxx属性指定组件的事件处理函数(注意大小写)
    * React使用的是自定义(合成)事件, 而不是使用的DOM事件
    * React中的事件是通过委托方式处理的(委托给组件最外层的元素)
2). 通过event.target得到发生事件的DOM元素对象
    <input onFocus={this.handleFocus}/>
handleFocus(event) {
      event.target //返回input对象
    }

强烈注意

1). 组件内置的方法中的this为组件对象
2). 在组件中自定义的方法中的this为null
解决办法：在构造函数中给自定义的方法绑定bind(this)方法

根据例子讲解：

需求: 自定义组件, 功能说明如下:
1. 界面如果页面所示
2. 点击按钮, 提示第一个输入框中的值
3. 当第2个输入框失去焦点时, 提示这个输入框中的值

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>07_component_refs</title>
</head>
<body>
  <input type="text">
  <button>提示输入数据</button>
  <input type="text" placeholder="失去焦点提示数据">
  <hr>

  <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 RefsTest extends React.Component {
      constructor (props) {
       super(props);
      //为什么在构造函数中绑定this，因为构造函数中的this一定是实例对象，还有构造函数只执行一次
        //修改this的三种方式 bind,call ,apply..
        this.showMsg = this.showMsg.bind(this); // 强制给showMsg()绑定this(组件对象)
        this.handleBlur = this.handleBlur.bind(this);//bind,不立即执行，返回一个函数
        //为实例对象添加属性，来接受返回的函数
        console.log(this)
      }

      showMsg() {
        // console.log(this); //this默认是null, 而不组件对象
        const input = this.refs.msg;
        alert(input.value);
      }

      handleBlur(event) {
        const input = event.target;
        alert(input.value);
      }

      render () {
        return (
          <div>
            <input type="text" ref="msg"/>
            <button onClick={this.showMsg}>提示输入数据</button>
            <input type="text" placeholder="失去焦点提示数据" onBlur={this.handleBlur}/>
          </div>
        );
      }
    }

    ReactDOM.render(<RefsTest/>, document.getElementById('example'));
  </script>
</body>
</html>