useimperativeHandle

简介

1 .在使用ref的时候，自定义暴露给父组件的实例，而不是让父组件随便调用子组件的方法
2 .父组件可以使用操作子组件中的多个ref

function Child(props,ref){
    let focusRef=useRef()
    let inputRef=useRef()

    useImperativeHandle(ref,()=>{

        // 这个函数返回一个对象，该对象会返回一个对象，这个对象就是父组件current的值，通过这种方法，父组件可以操作子组件的多个ref

        return {
            focusRef,
            inputRef,
            name:"test",
            focus(){
                focusRef.current.focus()
            },
            changeText(text){
                inputRef.current.value=text
            }
        }
    })

    return(
        <>
        <input type="text" ref={focusRef}/>
        <input type="text" ref={inputRef}/>
        </>
    )
}

Child=forwardRef(Child)
function Example(){
    const parentRef=useRef()

    function getFocus(){
        parentRef.current.focus()
        // 这个里面可以调用刚才暴露出来的方法

        parentRef.current.changeText('天天去上学')
    }

    return (
        <>
            <Child ref={parentRef}/>
            {/* 这个ref就是代指整个组件 */}
            <button onClick={getFocus}>获得焦点</button>
        </>
    )
}

3 .