Hook UseRef

实现非受控组件

子组件传递数据到父组件   用自定义事件

父组件

import React, { useState } from 'react'
import Child4 from '../components/Child4'
import Child5 from '../components/Child5'
export default function UseRef() {
    const [username, setnum] = useState("")

    let fn = (m: any) => {
        setnum(m)
    }
    return (
        <div>
            从子组件过来的数据{username}

            主动获取子组件的数据{ }
            <Child4 fn={fn}></Child4>
            <Child5 ref={Child5}></Child5>
        </div>
    )
}

子组件

import React, { useRef } from 'react'

export default function Child4({ fn }: any) {
    const usernameInput = useRef("")
    return (
        <div>
            <input type="text" ref={usernameInput} />
            传数据到父组件
            <button onClick={() => {
                fn(usernameInput.current.value)
            }}>传</button>
        </div>
    )
}