Как я могу пользователь refs в функциях без сохранения состояния React-Native, я использую React-Native 0.62.2

Question

У меня есть вход с именем CodeInput из стилей, использующих styled/components, и я хочу создать несколько входов из карты, но я получаю предупреждение Функциональные компоненты не могут получить ссылки, Попытки получить доступ к ссылке потерпят неудачу.

import React, {useRef} from 'react';

import {CodeInput} from './styles'

const codeInputs = (props) => {
    const inputFields = useRef([])
    const submitClick = index => {
        console.log("ref #: " + inputFields.current);
      };
    return (
        <CodeInput onChange={submitClick} keyboardType="phone-pad" maxLength={1} ref={el => {inputFields[index] = el }} />
    )
}

и здесь ниже я использую вышеуказанный компонент для создания нескольких входов

const renderInputs = () => {
      const array = new Array(4).fill(0)
       return array.map((_, idx)=>(
           <CodeInputs index={idx} key={idx}/>
       ))
 }

Answer 1

Вы можете использовать вот так.

const codeInputs = ({index}) => {
const inputFields = [];
const submitClick = index => {
    console.log("ref #: " + inputFields[index]);
  };
return (
    <CodeInput onChange={() => submitClick(index)} keyboardType="phone-pad" maxLength={1} ref={el => {inputFields[index] = el }} />
)
}