react当中refs

Refs 提供了一种方式，允许我们访问 DOM 节点  或  在 render 方法中创建的 React 元素(组件)。

Refs主要提供了三种方式：

import React, { Component } from 'react'

import { Input } from 'antd';

import Refs1 from "./refsComponents/refs1"


//方式1：字符串字面量 (即将弃用，不推荐， 潜在bug问题)

// class Refs extends Component {
//     componentDidMount(){
//         console.log(this.refs.zujian,this.refs.dom,this.refs.ant,"方式1");
//     }

//     render() {
//         return (
//             <div style={{background:"#ccc",padding:"10px"}}>
//                 <h4>react 当中refs三种使用方式。</h4>

//                 <Refs1 ref="zujian"/>
//                 <input type="text" placeholder="请输入" ref="dom"/>
//                 <Input placeholder="antDesign input" ref="ant"/>
//             </div>
//         )
//     }
// }

//-------------------------------------------------------------------------------------------------

//方式2：函数参数赋值（一般给组件实力本身）

// class Refs extends Component {
//     componentDidMount(){
//         console.log(this.zujian,this.dom,this.ant,"方式2");
//     }

//     render() {
//         return (
//             <div style={{background:"#ccc",padding:"10px"}}>
//                 <h4>react 当中refs三种使用方式。</h4>

//                 <Refs1 ref={zujian=>this.zujian = zujian}/>
//                 <input type="text" placeholder="请输入" ref={dom=>this.dom = dom}/>
//                 <Input placeholder="antDesign input" ref={ant=>this.ant = ant}/>
//             </div>
//         )
//     }
// }

//-------------------------------------------------------------------------------------------------


//方式3：新API(createRef),官方推荐使用。

class Refs extends Component {
    zujian = React.createRef()
    dom = React.createRef()
    ant = React.createRef()

    componentDidMount(){
        console.log(this.zujian.current,"方式3");
        console.log(this.dom.current,"方式3");
        console.log(this.ant.current,"方式3");
    }

    render() {
        return (
            <div style={{background:"#ccc",padding:"10px"}}>
                <h4>react 当中refs三种使用方式。</h4>

                <Refs1 ref={this.zujian}/>
                <input type="text" placeholder="请输入" ref={this.dom}/>
                <Input placeholder="antDesign input" ref={this.ant}/>
            </div>
        )
    }
}
export default Refs;

 

 

react - 函数组件中使用refs

import React from "react"
import { Input } from 'antd';

import Refs1 from "./refsComponents/refs1"

function HooksRefs(){
    const zujian = React.useRef();
    const dom = React.useRef();
    const ant = React.useRef();
    return (
        <div style={{background:"#A6FFFF",padding:"10px"}}>
            <h4>react-Hooks 当中refs使用方式。</h4>

            <Refs1 ref={zujian}/>
            <input type="text" placeholder="请输入" ref={dom}/>
            <Input placeholder="antDesign input" ref={ant}/>
        </div>
    )
}

export default HooksRefs;