第五节:React组件:获取DOM元素或子组件实例对象的Refs

1. 认识refs

1.1 refs说明

1. refs是React提供的一种访问DOM节点的方式
2. DOM节点上使用ref属性主要有三种不同方式获取DOM元素

2. 获取DOM元素的使用

2.1 通过refs获取DOM元素

说明:

1. 在DOM节点上使用ref属性, 属性值为自定义字符串
2. 此时就可以通过组件实例对象的refs属性获取所有的具有ref属性的DOM元素,
3. 属性refs的值是一个对象, 这个对象中的属性就是DOM节点上ref属性的值,属性值就是DOM元素
4. 因此我们可以直接通过自定义的ref属性值获取DOM元素

示例代码如下:

class MyCom extends React.Component{

    handleClick =() => {
        console.log(this.refs);
        /*
    打印内容
    {
      myinput: input
      节点上ref属性值: 对应DOM节点
    }
    */

        // 1. 获取DOM 节点的值
        let value = this.refs.myinput.value;

        // 2. 打印input标签中输入的内容
        console.log(value);


    }

    render(){
        return (
            <div>
                <input type="text" ref="myinput"/>
                <button onClick={ this.handleClick }>点击打印input内容</button>
            </div>
        )
    }
}


ReactDOM.render(<MyCom/>, document.getElementById("app"))

示例说明:

1. 在需要获取的DOM元素上添加ref属性,自定义一个字符串的值来标记这个节点
2. 当点击button按钮时,在事件处理函数中,通过组件实例对象this的refs属性,以及节点标记获取元素
3. 然后在通过value获取节点的值,并答应

2.2 自定组件实例属性获取DOM元素

说明:

1. DOM元素上ref属性的值除了是字符串还可以是一个函数
2. 这个函数会接受一个参数,这个参数就还是当前的DOM节点
3. 在函数中给组件实例对象自定义一个属性,并赋值这个DOM元素
4. 此时就可以通过组件实例对象获取节点并获取值

实例代码:

class MyCom extends React.Component{

    handleClick =() => {
        console.log(this);
        /*
    打印内容
    {
      input: input
      ...
    }
    */

        // 1. 获取DOM 节点的值
        let value = this.input.value;

        // 2. 打印input标签中输入的内容
        console.log(value);


    }

    render(){
        return (
            <div>
                <input type="text" ref={(input) => this.input = input}/>
                <button onClick={ this.handleClick }>点击打印input内容</button>
            </div>
        )
    }
}


ReactDOM.render(<MyCom/>, document.getElementById("app"))

实例说明:

1. 因为给input元素的ref赋值的是函数不是字符串,因为使用{}语法
2. 在函数中通过形参input接受到传递过来的input DOM元素
3. 并在函数中将这个DOM元素赋值给组件实例对象(this)的自定义属性input
4. 因此在点击事件函数中打印的组件实例对象(this)中就有自定义属性input值为inputDOM元素

2.3 通过React.createRef()API获取节点

说明:

1. 在React 16.3 版本引入了React.createRef() API,
2. 通过这个API,返回一个对象,这个对象,对象中有一个默认的current属性,值为null
3. 此时你需要获取那个DOM元素,就可以将这个对象作为ref属性的属性值
4. 那么就可以通过这个对象的current属性获取DOM元素

示例代码如下:

class MyCom extends React.Component{
    
    // 给组件实例对象添加一个myInput属性
    // 值为将要分配DOM节点的对象
    myInput = React.createRef();

    handleClick =() => {
        console.log(this);
        /*
        打印内容
        {
          myInput:{current:input}
          ...
        }
        */

        // 1. 获取DOM 节点的值
        let value = this.myInput.value;

        // 2. 打印input标签中输入的内容
        console.log(value);


    }

    render(){
        return (
            <div>
                <input type="text" ref={this.myInput}/>
                <button onClick={ this.handleClick }>点击打印input内容</button>
            </div>
        )
    }
}


ReactDOM.render(<MyCom/>, document.getElementById("app"))

示例说明:

1. 在组件中创建一个实例对象自定义属性myInput,
2. 这个属性值是通过React.createRef()API创建的用于分配DOM元素的对象
3. 在需要获取的input元素上添加ref属性,属性值,就是要分配的实例对象的自定义属性
4. 此时就可以通过组件实例对象自定义属性myInput的current属性获取到DOM元素

3. 获取子组件实例对象

说明:

1. 上面所学的三种不同的获取DOM节点的方法,也可以用在组件上
2. 在组件的子组件上也可以定义ref属性
3. 通过ref获取子组件实例对象
4. 在通过子组件的实例对象也可以调用子组件实例对象上的

示例代码:

// 子组件
class MySon extends React.Component{
    // 组件MySon实例对象方法
    run = () => {
        console.log("子组件上的run方法");
    }

    render(){
        return (
            <div>
                这是子组件
            </div>
        )
    }
}

// 父组件
class MyCom extends React.Component{

    myInput = React.createRef();

handleClick =() => {
    console.log(this);
    /*
    打印内容
    {
      MySon: MySon
      ...
    }
    */


    // 1. 获取子组件实例对象
    let {MySon} = this;
    
    // 2.调用子组件实例对象上的run方法
    MySon.run()


}

render(){
    return (
        <div>
            {/* 在子组件上使用ref属性 */}
            <MySon ref={(MySon) => this.MySon = MySon }/>
            
            <button onClick={ this.handleClick }>点击打印input内容</button>
        </div>
    )
}
}


ReactDOM.render(<MyCom/>, document.getElementById("app"))