Input

Form 컴포넌트와 같이 사용되는 input 형식의 컴포넌트입니다.

기본 사용은 input 과 같지만 Form 과 관련된 여러가지 mint-ui 만의 특성을 포함하고 있습니다.

export function InputBasic(){

  const [data, setData] = useState({
    aaa:'1',
  })

  return <Frame>
    <div>data.aaa = {data.aaa}</div>
    <div>---------------------</div>
    <Form data={data} setData={setData}>
      <Flex flexGap="10px">
        <span>
          aaa : 
          {/* data.aaa 와 바인딩 */}
          {/* 1, 2, 3 글자만 입력 허용 */}
          {/* maxLength = 3 */}
          <Input targetId='aaa' 
          validCharacter={['1','2','3']} 
          maxLength={3}
          />
        </span> 
      </Flex>
    </Form>
  </Frame>
}

input 엘레먼트의 속성을 동일하게 가지므로 maxLength 와 같은 input 의 속성도 사용 가능합니다.

속성 설명

targetId

targetId = keyof T

Form 에 바인딩된 T 타입에 대한 속성을 targetId 에 지정합니다. 해당 속성과 input 이 바인딩됩니다.

(optional) validValue

validValue = FormValidationTypes = RegExp|FormValidFunction|string[];

FormValidFunction = (target:HTMLInputElement|HTMLTextAreaElement, value:string|number, onSubmit:boolean, formDefaultShowMessage:FormDefaultShowMessage)=>string|undefined;

Form 컴포넌트의 useMintFormValidation 옵션이 true 일때 사용되는 속성입니다.

Input 에 들어오는 사용자입력값을 정합성 체크할 수 있습니다.

크게 2가지 경우에 사용됩니다.

• onInput 이벤트 내에서
• form submit 이벤트 내에서

아래는 validValue 의 타입별 설명입니다.

타입	설명
RegExp	입력된 정규식으로 test 를 체크하여 결과를 유효성을 판단합니다. 만약 /\d+/ 로 입력한 경우 /\d+/.test(value) 의 결과가 false 이면 오류입니다.
FormValidFunction	함수의 결과가 string 이면 해당 string 을 오류메시지로 하는 오류가 발생합니다.
string[]	입력된 string 에 속하지 않으면 오류입니다.

FormValidFunction 의 파라미터 설명

파라미터	타입	설명
target	HTMLInputElement or HTMLTextAreaElement	체크 대상 엘레먼트
value	string or number	체크대상 값
onSubmit	boolean	정합성 체크 타이밍이 submit 인지 여부
formDefaultShowMessage	(message:string, positionBaseElement:HTMLElement)=>void	메시지와 대상 엘레먼트를 넘기면 즉시 그 위치에 토스트메시지를 띄울 수 있습니다.

(optional) validCharacter

validValue 와 같은 타입을 가지지만 몇가지 다른점이 있습니다.

• 호출되는 타이밍이 onInput 으로 한정되고, 체크대상이 onInput 시에 들어온 data 필드 (타이핑된 글자) 에 한정됩니다.
• 타이핑된 글자를 체크하여 오류인 경우 value 에 아얘 담기지 않도록 처리할 수 있습니다.
• useMintFormValidation 를 사용하지 않는경우에도 적용됩니다.

붙여넣기(onPaste) 하는 경우에도 동일하게 적용됩니다.