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

유효성 검사 - 작성 중

당근먹는하니 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
반응형