카테고리 없음

React useRef, HTMLInputElement 를 이용하여 포커스 이동

쿠카곰돌이 2023. 7. 7. 11:45
반응형
import React, {useRef} from 'react';

const App06 = () => {
    const elName: React.RefObject<HTMLInputElement> = useRef<HTMLInputElement>(null);
    const goFirstInputElement = () => {
        if(elName.current) elName.current.focus();
    };

    return (
        <div className='boxStyle'>
            이름 : <input ref={elName} type="text" defaultValue="마동석" />
            <br />
            전화 : <input type="text" defaultValue="010-2122-4418" />
            <br/>
            주소 : <input type="text" defaultValue="인천" />
            <br/>
            <button onClick={goFirstInputElement}> 첫번째 필드로 포커스 이동</button>
        </div>
    );
}

export default App06;
반응형