React에서 숫자 입력 유효성 검사를 처리하는 가장 좋은 방법

React에서 숫자 입력을 처리하는 것은 어려울 수 있으며, 특히 크기가 올바른지 또는 소수점 이하 자릿수가 올바른지 확인해야 할 경우 더욱 그렇습니다. 간단한 작업은 쉬워 보일 수 있지만 일단 핵심에 들어가서 사용자 정의 사용자 경험을 달성하려고 하면 코드가 빠르게 지저분해질 수 있습니다.

우리 대부분이 사용하는 일반적인 접근 방식은 onChange 핸들러에서 사용자 입력을 제한하는 사용자 정의 유효성 검사 논리를 작성하는 것입니다.

이런 것도

function NumberInput({
  value,
  onChange,
  min,
  max,
}: {
  value: number;
  onChange: (val: number) => void;
  min?: number;
  max?: number;
}) {
  const changeHandler = (e: React.ChangeEvent<HTMLInputElement>) => {
    const val = +e.target.value;
    if (min != null && val < min) {
      onChange(min);
      return;
    }
    if (max != null && val > max) {
      onChange(max);
      return;
    }
    onChange(val);
  };

  return (
    <input
      type="number"
      value={value}
      onChange={changeHandler}
    />
  );
}

이 논리는 언뜻 보기에는 좋아 보이지만 이미 사용해 본 경우 예상치 못한 이상한 동작이 많이 발생하며 전혀 좋은 사용자 경험이 아니라는 것을 알 수 있습니다!

또 다른 접근 방식은 표준 HTML min, max, maxLength 등과 같은 속성을 사용하는 내장 유효성 검사가 있는 요소입니다. 그러나 일반적으로 구현하려는 즉각적인 피드백과 입력 제한이 부족합니다.

Stack Overflow로 인터넷 검색을 하다가... 해킹 솔루션을 찾았습니다.

• onKeyPress를 사용하여 입력 값을 수동으로 검증합니다.
• 패턴 속성을 사용하고 Regex를 추가하여 숫자를 검증합니다(이것은 type="number"에서는 작동하지 않으므로 type="text"로 만들어야 합니다).
• 그리고 뭐...

많은 시행착오 끝에 마침내 더 나은 방법을 찾아냈습니다.

해결책

맞춤형 자바스크립트와 함께 내장된 HTML 입력 유효성 검사를 활용하여 완벽한 솔루션을 구축할 수 있습니다.

구성요소는 다음과 같습니다

// Interface for props overriding the default value and onChange
// attribute to accept only numeric value
export interface NumberInputProps
  extends Omit<React.InputHTMLAttributes<HTMLInputElement>, "onChange"> {
  onChange: (val: number) => void;
  value: number;
}

function NumberInput({
  value,
  onChange,
  min,
  max,
  step,
  ...props
}: NumberInputProps) {
  // Internal input state to avoid weird behaviors with empty inputs
  const [input, setInput] = React.useState(value?.toString() || "");

  const changeHandler = (e: React.ChangeEvent<HTMLInputElement>) => {
    // Using HTML input validity API to validation
    if (
      (max != null && e.target.validity.rangeOverflow) ||
      (min != null && e.target.validity.rangeUnderflow) ||
      (step != null && e.target.validity.stepMismatch)
    )
      return;

    const val = +e.target.value;
    setInput(e.target.value);
    onChange(val);
  };

  // To ensure the external updates are reflected in the input element
  React.useEffect(() => {
    setInput(value.toString());
  }, [value]);

  return (
    <Input
      ref={ref}
      type="number"
      value={input}
      onChange={changeHandler}
      min={min}
      max={max}
      step={step}
      {...props}
    />
  );
}

이 접근 방식을 사용하면 내장된 HTML 유효성 검사를 활용하고 숫자에 대한 잘못된 사용자 입력을 제한할 수도 있습니다.

실제 사례를 확인하고 실험해 보세요

보너스

이러한 사용자 정의 후크에서 논리를 추출하여 이 논리를 더욱 재사용 가능하게 만들 수 있습니다

export const useNumberInput = ({
  value,
  onChange,
  min,
  max,
  step,
}: {
  value: number;
  onChange: (val: number) => void;
  max?: number;
  min?: number;
  step?: number;
}): InputHTMLAttributes<HTMLInputElement> => {
  const [input, setInput] = useState(value?.toString() || "");

  const changeHandler = (e: React.ChangeEvent<HTMLInputElement>) => {
    if (
      (max != null && e.target.validity.rangeOverflow) ||
      (min != null && e.target.validity.rangeUnderflow) ||
      (step != null && e.target.validity.stepMismatch)
    )
      return;

    const val = +e.target.value;
    setInput(e.target.value);
    onChange(val);
  };

  useEffect(() => {
    setInput(value.toString());
  }, [value]);

  return {
    type: "number",
    value: input,
    onChange: changeHandler,
    min,
    max,
    step,
  };
};

필요한 모든 구성 요소에 사용하세요(분명히 입력 요소가 있는 구성 요소).

export default function CustomInput() {
  const [value, setValue] = useState(0);
  const inputProps = useNumberInput({
    value,
    onChange: setValue,
    min: 1,
    max: 50,
  });

  return (
    <div>
      <button onClick={() => onChange(value + 1)}>
        +
      </button>
      <button onClick={() => onChange(value - 1)}>
        -
      </button>
      <input
        {...inputProps}
        {...otherProps}
      />
    </div>
  );
}

언제든지 의견을 추가하고 개선 사항을 제안해 주세요!

위 내용은 React에서 숫자 입력 유효성 검사를 처리하는 가장 좋은 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!