프론트엔드✏️/개인공부
유효성 검사 - 작성 중
당근먹는하니
2022. 9. 20. 16:54
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
반응형