How to use react ref in Typescript

Normally written in jsx as follows:

class Header extends Component<any>{

    myInputRef = React.createRef();
    render(){
        return(
            <div>
                <input type="text" ref={this.myInputRef}/>
            </div>
        )
    }
}

However, due to type checking in tsx, an error will be compiled:

Type 'RefObject<unknown>' is not assignable to type 'string | ((instance: HTMLInputElement | null) => void) | RefObject<HTMLInputElement> | null | undefined'.
Type 'RefObject<unknown>' is not assignable to type 'RefObject<HTMLInputElement>'.
Type 'unknown' is not assignable to type 'HTMLInputElement'.ts(2322)

Look at the error message, you need to add the type, change it to:

myInputRef = React.createRef<HTMLInputElement>();

reference:

https://medium.com/@martin_hotell/react-refs-with-typescript-a32d56c4d315

Guess you like

Origin blog.csdn.net/kaiyuantao/article/details/115520143