React Hooks之useRef

useRef可以用来拿到dom节点的引用,拿到引用后可以进行一系列操作

步骤:

①创建初始化引用 const newRef=React.createRef ( )

②以属性的方式绑定到dom节点上 eg.

③进行一系列业务逻辑 

一般等组件挂载完成,拿到引用后再进行业务逻辑

所以一般在useEffect钩子函数里完成业务逻辑

实例:给input表单自动聚焦(原本是点上去才会聚焦)

import React, { useEffect, useRef } from 'react';

function Input() {

    //  1. 初始化Ref
    const inputRef = useRef()

    useEffect(() => {
        
        //  3. 使用input表单的引用inputRef实现自动聚焦业务
        inputRef.current.focus()
        
    }, [])

    //  2. 以属性方式给Ref赋值
    return 
}

export default function RefDemo() {
    return (
        
) }

你可能感兴趣的:(react.js,前端)