React基础之useInperativehandlle

通过ref调用子组件内部的focus方法来实现聚焦

与forwardRef类似，但是forwardRef是通过暴露整个Ref来实现，而useInperativehandle是通过对外暴露一个方法来实现的

import

{

forwardRef

,

useImperativeHandle

,

useRef

,

useState

}

from

“react”

;

const

Son

=

forwardRef

((

props

,

ref

)

=>

{

//

实现聚焦逻辑

const

inputRef

=

useRef

(

null

)

const

focushandleer

=()

=>

{

inputRef

.

current

.

focus

()

}

//

聚焦方法暴露出去

useImperativeHandle ( ref ,() => {

return {

// 暴露的方法

focushandleer

}

})

return

<

input

type

=

“text”

ref

=

{

inputRef

}

</

input

})

function

App

() {

//

传给子组件的函数

const

sonRef

=

useRef

(

null

)

const

showRef

=()

=>

{

console

.

log

(

sonRef

.

current

);

sonRef . current . focushandleer ()

}

return

(

<

div

className

=

“App”

<

Son

ref

=

{

sonRef

}

/>

<

button

onClick

=

{

showRef

}

focus

</

button

</

div

);

}

export default

App

;