입력창 Input

태그

Molecules

개발자

적용 코드

<InputDiv ref={emailRef} onChange={handleChange} text="이메일" type="email" />
JavaScript
복사

속성	설명
text	입력항목
type	input type ex) email, password, text 등
onChange	입력값이 변경될때 실행될 함수
onBlur	포커스가 해제될 때 실행될 함수

컴포넌트 구현 코드

function InputDiv({ type, text, onChange, onBlur }, ref) {
    return (
        <InputBox text={text}>
            <InputTag ref={ref} onChange={onChange} onBlur={onBlur} type={type} required />
            <span>{text}</span>
        </InputBox>
    );
}

export default forwardRef(InputDiv);
JavaScript
복사

•

컴포넌트 사용시 입력값을 useRef로 처리하기 위하여 forwardRef 사용