0

Hola a todos y gracias de antemano.

Tengo una pantalla, en la que genero dinámicamente los TextInput (el número de textInput generados por defecto es 4), y desde el componente padre se puede indicar cuántos inputs se quieren tener en la vista.

He conseguido dinamizar la generación de inputs, pero necesito dinamizar las referencias y no encuentro la forma.

Tal y como está ahora, funciona perfectamente para 4 inputs, pero si lo creo desde el componente padre con 2 inputs, se rompe.

Este es el código:

import React, { useRef } from 'react'
import { TextInputProps, View, TextInput } from 'react-native'

interface iPinCode extends TextInputProps {
  onComplete: (code: string) => void
  length?: number
}

const PinCode: React.FunctionComponent<iPinCode> = ({ onComplete, length }) => {

  const inputStyle = {
    height: 75,
    width: 50,
    fontSize: 26,
    color: '#FFF',
    backgroundColor: '#4B4B4B',
    borderRadius: 15,
    padding: 8,
    margin: 4,
  }

  const _getInputs = (length: number) => {
    let inputs: JSX.Element[] = []

    let pin: string[] = []

    let refFirstInput = useRef()
    let refSecondInput = useRef()
    let refThirdInput = useRef()
    let refFourthInput = useRef()

    for (let i = 0; i < length; i++) {      
      inputs.push(
        <TextInput
          key={i}
          style={[inputStyle, { textAlign: 'center' }]}
          onChangeText={text => {
            text.length >= 1 ? pin.splice(i, 0, text) : pin.splice(i, 1)
            i === 0
              ? text.length > 0 && refSecondInput.current.focus()
              : i === 1
              ? text.length > 0 && refThirdInput.current.focus()
              : i === 2
              && text.length > 0 && refFourthInput.current.focus()

            console.log('PIN: ', pin)
          }}
          value={pin[i]}
          onKeyPress={({ nativeEvent }) => {
            nativeEvent.key === 'Backspace' &&
            i === 3 && refThirdInput.current.focus() ||
            i === 2 && refSecondInput.current.focus() ||
            i === 1 && refFirstInput.current.focus()
        }}
          secureTextEntry
          keyboardType="numeric"
          maxLength={1}
          returnKeyType={i === 3 ? 'done' : 'next'}
          onSubmitEditing={() => { onComplete(pin.join('')); console.log('PIN TO SEND: ', pin.join(''))}}
          ref={
            i === 0
              ? refFirstInput
              : i === 1
              ? refSecondInput
              : i === 2
              ? refThirdInput
              : i === 3
              && refFourthInput
          }
          autoFocus={i === 0 && true}
          />
      )
    }

    return (
      <View style={{ flexDirection: 'row', justifyContent: 'center' }}>
        {inputs}
      </View>
    )
  }

  return <>{_getInputs(length || 4)}</>
}

export default PinCode

Ahora funciona perfectamente con 4 entradas, pero falla con otro número de inputs.

Necesito saber como establecer refs dinámicas para pasarlas dentro del bucle for y usarlas en onChangeText y onKeyPress del componente TextInput.

He intentado crear nombres de variables dinámicas pero no funciona. Si pudiese utilizar el index del bucle for para crear referencias dinámicas, creo que estaría solucionado, pero no consigo hacerlo.

Muchas gracias.

1 respuesta 1

0

Solucionado!

Finalmente se creó un mapa de referencias para luego utilizarlo como referencia y poder utilizarlo para gestionar el .focus() de cada input al ser completado.

Quedó así:

import React, { useRef } from 'react'
import { TextInputProps, View, TextInput } from 'react-native'

interface iPinCode extends TextInputProps {
  onComplete: (code: string) => void
  length?: number
}

const PinCode: React.FunctionComponent<iPinCode> = ({ onComplete, length }) => {
  
  const inputStyle = {
    height: 75,
    width: 50,
    fontSize: 26,
    color: '#FFF',
    backgroundColor: '#4B4B4B',
    borderRadius: 15,
    padding: 8,
    margin: 4,
  }
  
  const _getInputs = (length: number) => {
    let inputs: JSX.Element[] = []
    
    let pin: string[] = []

    const mapRef: any = []
    
    for (let index = 0; index < length; index++) {
      mapRef.push(useRef())
    }
    
    for (let i = 0; i < length; i++) {
      inputs.push(
        <TextInput
          key={i}
          style={[inputStyle, { textAlign: 'center' }]}
          onChangeText={text => {
            text.length === 1 ? pin.splice(i, 0, text) : pin.splice(i, 1)
            i < length - 1 && text.length > 0 && mapRef[i + 1].current.focus()
            text.length === 0 && i > 0 && mapRef[i].current.focus()
          }}
          value={pin[i]}
          onKeyPress={({ nativeEvent }) => {
            nativeEvent.key === 'Backspace' &&
              i > 0 && mapRef[i - 1].current.focus()
          }}
          secureTextEntry
          keyboardType="numeric"
          maxLength={1}
          returnKeyType={length - 1 ? 'done' : 'next'}
          onSubmitEditing={() => onComplete(pin.join(''))}
          ref={mapRef[i]}
          autoFocus={i === 0}
        />
      )
    }

    return (
      <View style={{ flexDirection: 'row', justifyContent: 'center' }}>
        {inputs}
      </View>
    )
  }
  return <>{_getInputs(length || 4)}</>
}

export default PinCode

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.