EN
React - forward ref in TypeScript
1 points
In this short article we would like to show how to forward ref property in React. Presented solution uses TSX (React Syntax Extension to TypeScript).
Checkbox.tsx file:
xxxxxxxxxx1
import MaterialCheckbox from '@material-ui/core/Checkbox';2
import React, { FocusEventHandler, forwardRef, Ref } from 'react';3
4
type Props = {5
name?: string;6
checked?: boolean;7
onFocus?: FocusEventHandler<HTMLButtonElement>;8
onBlur?: FocusEventHandler<HTMLButtonElement>;9
};10
11
const Checkbox = (12
{ name, checked, onFocus, onBlur }: Props,13
ref: Ref<HTMLButtonElement>14
) => {15
return (16
<MaterialCheckbox17
ref={ref}18
name={name}19
checked={checked}20
onFocus={onFocus}21
onBlur={onBlur}22
/>23
);24
};25
26
export default forwardRef(Checkbox);