react的ref属性

逃离我推掉我的手 2022-05-15 10:39 329阅读 0赞

1.组件的三大属性之二：ref属性

(1)组件内的标签都可以定义ref属性来标识自己

（２）在组件内可以通过this.refs.refName找到对应的真实DOM对象

*<input ref="msg" type="text"/>
    *this.refs.msg//返回input对象

2.事件处理

（１）通过onXxx属性指定组件的事件处理函数（注意大小写）

\*React使用的是自定义事件，而不是标准DOM事件

\*React的事件是通过委托方式处理的，委托给组件最外层的元素

（２）事件的回调函数都有event对象，通过event.target找到触发事件的目标对象

<input  onBlur={this.handleBlur /}
    
    this.handleBlur(event){
    event.target//返回的是input对象
    }

３．强烈注意：

（１）组件内置的函数（方法）中的this指向的是实例对象

（２）组件自定义函数（方法）中的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;