useRef , input 컨트롤, 커서 위치 이동 with antd

React에서는 useRef를 이용해 특정 DOM을 선택할 수 있습니다.

 

useRef에 대해서는.... 검색하면 많은 자료가 나오니 패스합니다.

 

input에 기본 값을 주고 포커스 되었을 때 커서를 가장 뒤로 보내주기 위해 useRef를 사용하였고,

 

그 과정을 소개하고자 합니다.

 

먼저 antd의 input 태그를 사용하였으며, focus 안에 있는 cursor 객체는 antd에서만 되는듯 했다.

 

일반 input태그에서는 확인해보지 못했습니다.. 

 

만약 일반 input에서 저게 안된다면 useRef.current로 console.log 찍어 보시면 해당 input의 value를 받아 올 수 있습니

 

다.  

 

그 value의 length값을 가지고 useRef.current 안에 있는 selectionStart , selectionEnd 값을 value.length값으로 설정 하시

 

면 됩니다.

 

일반 input 태그에서 cursor 객체는 이 글을 보고 계시는 여러분들이 한번 해보시고 알려주세요.................

 

 

import React, { useRef } from 'react';

const 컴포넌트 = () => {

	const inputRef = useRef<HTMLInputElement>(null);

	return(
	  <Input
        ref={inputRef}
        onClick={() =>  inputRef.current!.focus({
        cursor: 'end'
      })}
	  />
	)
    
   }

먼저 useRef를 변수에 할당하고 Input에 ref에 넣었습니다.

 

해당 페이지에는 많은 input 태그가 존재하기 때문에 포커스 됐을 때 커서가 가장 뒤로 이동되길 원해서 onClick 이벤트

 

에 해당 작업이 이뤄지게 했습니다.

 

하나의 input으로 테스트를 한 뒤 해당 페이지에 있는 모든 input 태그에 적용 하려고 했는데....................

 

여러개의 useRef를 만들면 비효율적인 하드코딩이 될 것 같아 하나의 useRef로 여러개의 태그를 관리 할 수 있는 방법을

 

을 찾아 코드를 작성 했습니다.

 

import React, { useRef } from 'react';

const 컴포넌트 = () => {
// 여러개 생성 하기 위해 하나의 빈 배열로 생성합니다.
	const inputRef = useRef<HTMLInputElement[]>([]); 
    // 여러곳에서 중복적으로 같은 코드가 쓰이기 때문에 따로 함수로 빼놓았습니다
    const handleFocus = (idx: number) => { 
	    inputRef.current[idx]!.focus({	   
	      cursor: 'end'
	    })
  	};
	return(
	  <Input
            type={'text'}
            ref={elem => (inputRef.current[0] = elem)}
            onClick={() => handleFocus(0)}
        />
         <Input
            type={'number'}
            ref={elem => (inputRef.current[1] = elem)}
            onClick={() => handleFocus(1)}
        />
         <Input
            type={'text'}
            ref={elem => (inputRef.current[2] = elem)}
            onClick={() => handleFocus(2)}
        />
         <Input
            type={'text'}
            ref={elem => (inputRef.current[3] = elem)}
            onClick={() => handleFocus(3)}
        />
	)
    
   }

 

하드코딩 하기 싫어서 작업을 했는데, 이미 해당 페이지에 input태그가 정적으로 작성되어 이렇게 작업을 했다. [ㅋㅎ]

 

동적으로 작업하려면 ref={elem => (inputRef.current[idx] = elem)} 부분을 반복문으로 작업하면 된다.

 

이렇게 하고 테스트를 해보니 어느 한곳에서 

 

Failed to execute 'setSelectionRange' on 'HTMLInputElement': The input element's type ('number') does not support selection

 

에러를 뱉어냈는데 type이 number이 문제가 되어 해당 부분을  text로 변경했고 정상 작동 되었다.

 

 

끝!!!!!!!