useInputState

useInputState (입력 상태 관리)

useInputState 훅은 네이티브 입력(onChange 핸들러의 이벤트)과 커스텀 입력(onChange 핸들러의 값)의 상태를 관리해요.

출처: 문서

본문

useInputState 훅은 네이티브 입력(onChange 핸들러의 이벤트 포함)과 커스텀 입력(onChange 핸들러의 값 포함)의 상태를 처리해요. 이 훅은 모든 Mantine 및 네이티브 입력에서 동작해요.

import { useState } from 'react';
import { NumberInput, TextInput } from '@mantine/core';
import { useInputState } from '@mantine/hooks';

function WithUseInputState() {
  const [stringValue, setStringValue] = useInputState('');
  const [numberValue, setNumberValue] = useInputState(0);

  return (
    <>
      <TextInput label="String value" value={stringValue} onChange={setStringValue} />
      <NumberInput mt="sm" label="Number value" value={numberValue} onChange={setNumberValue} />
    </>
  );
}

정의 (Definition)

type UseInputStateReturnValue<T> = [
  T,
  (value: null | undefined | T | React.ChangeEvent<HTMLInputElement>) => void,
];

function useInputState<T>(initialState: T): UseInputStateReturnValue<T>

Exported types

UseInputStateReturnValue 타입은 @mantine/hooks 패키지에서 내보내져요.

import type { UseInputStateReturnValue } from '@mantine/hooks';

더 알아보기 (Learn more)