react + typescript ref를 사용한 값 입력 후 포커싱 자동 이동 예제(ex:핀 번호)

값 입력 후 포커싱 자동 이동 예제(ex:핀 번호)

하기 HTML의 input 태그 설정을 사용하게되면 모바일에서 숫자만 입력 가능한 키패드가 표시된다.

  // react + typescript
  ...

  class PinLogin extends React.Component<Props, OwnState> {
    ...

    pinCodeNumFocus2: React.RefObject<HTMLInputElement>
    pinCodeNumFocus3: React.RefObject<HTMLInputElement>
    pinCodeNumFocus4: React.RefObject<HTMLInputElement>
    pinCodeNumFocus5: React.RefObject<HTMLInputElement>
    pinCodeNumFocus6: React.RefObject<HTMLInputElement>

    constructor(props) {
      super(props)
      this.state = {}
      this.pinCodeNumFocus2 = React.createRef()
      this.pinCodeNumFocus3 = React.createRef()
      this.pinCodeNumFocus4 = React.createRef()
      this.pinCodeNumFocus5 = React.createRef()
      this.pinCodeNumFocus6 = React.createRef()
    }

    handleMoveFocus = (inputOrderNum:number) => {
        switch (inputOrderNum) {
          case 1:
            this.pinCodeNumFocus2.current.focus()
            break
          case 2:
            this.pinCodeNumFocus3.current.focus()
            break
          case 3:
            this.pinCodeNumFocus4.current.focus()
            break
          case 4:
            this.pinCodeNumFocus5.current.focus()
            break
          case 5:
            this.pinCodeNumFocus6.current.focus()
            break
          case 6:
            // this.pinCodeNumFocus6.current.focus()
            // 값 전부 입력 후 저장 가능하게 함수를 설정해도 됨
            break
        }
    }
  }

  ...

  // html
  ...
  <input
    type={'numeric'}
    inputMode={'decimal'}
    maxLength={1}
    pattern={'d*'}
    onChange={event => this.handleMoveFocus(1)}
    placeholder={'-'}
  />
  <input
    type={'numeric'}
    inputMode={'decimal'}
    maxLength={1}
    pattern={'d*'}
    onChange={event => this.handleMoveFocus(2)}
    ref={this.pinCodeNumFocus2}
    placeholder={'-'}
  />
  <input
    type={'numeric'}
    inputMode={'decimal'}
    maxLength={1}
    pattern={'d*'}
    onChange={event => this.handleMoveFocus(3)}
    ref={this.pinCodeNumFocus3}
    placeholder={'-'}
  />
  <input
    type={'numeric'}
    inputMode={'decimal'}
    maxLength={1}
    pattern={'d*'}
    onChange={event => this.handleMoveFocus(4)}
    ref={this.pinCodeNumFocus4}
    placeholder={'-'}
  />
  <input
    type={'numeric'}
    inputMode={'decimal'}
    maxLength={1}
    pattern={'d*'}
    onChange={event => this.handleMoveFocus(2)}
    ref={this.pinCodeNumFocus2}
    placeholder={'-'}
  />
  <input
    type={'numeric'}
    inputMode={'decimal'}
    maxLength={1}
    pattern={'d*'}
    onChange={event => this.handleMoveFocus(5)}
    ref={this.pinCodeNumFocus5}
    placeholder={'-'}
  />
  <input
    type={'numeric'}
    inputMode={'decimal'}
    maxLength={1}
    pattern={'d*'}
    onChange={event => this.handleMoveFocus(6)}
    ref={this.pinCodeNumFocus6}
    placeholder={'-'}
  />
  ...