我如何在无状态函数 React-Native 中使用 refs，我正在使用 React-Native 0.62.2

Question

我有一个名为 CodeInput 的输入来自使用 styled/components 的样式，我想从一个地图创建多个输入，但我收到警告功能组件不能被赋予 refs，访问 ref 的尝试将失败。

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 }} />
)
}