useInputState

입력 필드의 상태를 관리하는 커스텀 훅 입니다.

단일 입력 필드와 다중 입력 필드를 지원합니다.

• 다중 입력 필드는 객체 형태로 입력 필드의 name 속성을 key로 사용합니다.

Code

🔗 실제 구현 코드 확인

Interface

function useInputState(initialValue: T): {
  value: T | undefined;
  onChange: (e: ChangeEvent<HTMLInputElement>) => void;
  reset: () => void;
}

Usage

typescript

//초기값 없음

import { useInputState } from '@modern-kit/react';

const Example = () => {
  const { value, onChange, reset } = useInputState<string>();

  return (
    <>
      <h1>{value}</h1>
      <input type="text" name="test" onChange={onChange} value={value} />
      <button onClick={reset}>reset</button>
    </>
  );
};

typescript

//문자열 초기값

import { useInputState } from '@modern-kit/react';

const Example = () => {
  const { value, onChange, reset } = useInputState<string>('testValue');

  return (
    <>
      <h1>{value}</h1>
      <input type="text" name="test" onChange={onChange} value={value} />
      <button onClick={reset}>reset</button>
    </>
  );
};

typescript

//객체 초기값

import { useInputState } from '@modern-kit/react';

const Example = () => {
  const { value, onChange, reset } = useInputState<{ test: string }>({
    test: 'testValue',
  });

  return (
    <>
      <h1>{value.test}</h1>
      <input type="text" name="test" onChange={onChange} value={value.test} />
      <button onClick={reset}>reset</button>
    </>
  );
};

Example

test:

---

title:

description: