22 lines
585 B
TypeScript
22 lines
585 B
TypeScript
import { useRef, JSX } from "react";
|
|
|
|
export default function InputFocus(): JSX.Element {
|
|
// 1. Create a ref (initially null)
|
|
const inputRef = useRef<HTMLInputElement>(null);
|
|
|
|
const handleClick = () => {
|
|
// 3. Access the native DOM element via .current and focus it
|
|
inputRef.current?.focus();
|
|
};
|
|
|
|
return (
|
|
<div>
|
|
{/* 2. Attach the ref to the JSX element */}
|
|
<input ref={inputRef} type="text" className="input input-bordered" />
|
|
<button onClick={handleClick} className="btn btn-primary ml-2">
|
|
Focus Input
|
|
</button>
|
|
</div>
|
|
);
|
|
}
|