728x90
반응형
<XInput
onChange={(event: any) =>
props.onChangeInput(`${props.type}`, event)
}
value={props.searchWord}
text={
props.type === "baseid"
? "숫자만 입력하세요."
: "이름 전체를 입력하세요."
}
/>
import { useRef } from "react";
const XInput = ({
text = "검색어를 입력하세요.",
...props
}) => {
const inputRef = useRef<HTMLInputElement>(null);
const onClickX = () => {
if (inputRef.current?.value) {
inputRef.current.value = "";
}
};
return (
<div className="inputWrap">
<input
className={`XInput`}
onChange={props.onChange}
placeholder={text}
maxLength={props.maxLength}
type="search"
ref={inputRef}
value={props.value}
/>
<button className="btnClear" onClick={onClickX}></button>
</div>
);
};
export default XInput;
728x90
반응형
'프론트엔드✏️ > 개인공부' 카테고리의 다른 글
[자동로그아웃/타이머] setinterval() - ★개인 포폴에 붙여보자 (2) | 2022.09.21 |
---|---|
유효성 검사, 정규표현식 (0) | 2022.09.21 |
[react-query] QueryClient, - 작성 중 (0) | 2022.09.20 |
useEffect vs useLayoutEffect (1) | 2022.09.19 |
[react-to-print] 리액트 컴포넌트 프린트하기 💌 (0) | 2022.09.16 |