당근먹는하니
귀엽고 행복해
당근먹는하니
전체 방문자
오늘
어제
  • 분류 전체보기 (274)
    • 다람쥐🐿 (26)
    • C++ 공부빵야 (7)
    • 공부👻 (5)
    • 프론트엔드✏️ (228)
      • 코드캠프 (120)
      • 팀 프로젝트✨ (31)
      • 개인공부 (67)
    • 프론트엔드 - 바닐라js (7)

블로그 메뉴

  • 홈
  • 태그
  • 방명록

공지사항

인기 글

태그

  • CSS
  • 알고리즘
  • algorithm
  • 회고
  • 프로그래머스
  • 리액트
  • 공통 컴포넌트
  • 자바스크립트
  • next.js
  • 코드캠프
  • javascrpit
  • refreshtoken
  • 코딩
  • 배포
  • HTML
  • ssg
  • React-hook-form
  • 팀프로젝트
  • javascript
  • 코딩 부트캠프
  • JS
  • typescript
  • 프론트엔드
  • 부트캠프
  • graphql
  • 팀플
  • react
  • emotion
  • 팀 프로젝트
  • 배열

최근 댓글

최근 글

티스토리

250x250
반응형
hELLO · Designed By 정상우.
당근먹는하니

귀엽고 행복해

프론트엔드✏️/개인공부

유효성 검사 - 작성 중

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
반응형
저작자표시 비영리 동일조건 (새창열림)

'프론트엔드✏️ > 개인공부' 카테고리의 다른 글

[자동로그아웃/타이머] 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
    '프론트엔드✏️/개인공부' 카테고리의 다른 글
    • [자동로그아웃/타이머] setinterval() - ★개인 포폴에 붙여보자
    • 유효성 검사, 정규표현식
    • [react-query] QueryClient, - 작성 중
    • useEffect vs useLayoutEffect
    당근먹는하니
    당근먹는하니

    티스토리툴바