Reactjs 使用数组React useRef进行动态响应

我试图使组件的重点移动到下一个输入时，每个字母输入

我想我需要像数组一样的多个

ref

，但我不知道

这是问题的示例代码

function PIN({length, onChange, value}){
  const inputEl = React.useRef(null);
  function handleChange(e){
    onChange(e);
    inputEl.current.focus(); 
  }
  return (
    <div>
      {
        new Array(length).fill(0).map((i)=>(
          <input type="text" ref={inputEl} onChange={handleChange} />
        ))
      }
    </div>
  )
}

功能引脚（{length，onChange，value}）{
const inputEl=React.useRef（null）；
功能手柄更改（e）{
onChange（e）；
inputEl.current.focus（）；
}
返回(
{
新数组（长度）.fill（0）.map（（i）=>(
))
}
)
}

在输入中，您可以将函数传递给ref参数，这将允许您将所有ref存储在一个数组中：

let myRefs = [];

const saveThisRef = (element) => {
  myRefs.push(element);
}

然后，可以将函数传递给渲染的每个输入：

<input type="text" ref={saveThisRef} onChange={handleChange} />

然后，您可以前进到onChange处理程序中的下一个输入：

// Find the index of the next element
const index = myRefs.indexOf(element) + 1;
// Focus it
if (index < myRefs.length) myRefs[index].focus();

//查找下一个元素的索引
常量索引=myRefs.indexOf（元素）+1；
//集中注意力
如果（索引

输入上的ref相当于回调函数。你可以把方法传给他。此方法接收的参数是输入dom元素，可以将其存储在数组中

import React from "react";
import "./styles.css";

export default function App() {
  const inputEl = React.useRef([]);
  function handleChange(i){
    inputEl.current[i+1].focus(); 
  }
  return (
    <div>
      {
        new Array(3).fill(0).map((n,i)=>(
          <input 
          key={i} 
          type="text" 
          ref={ref=>inputEl.current.push(ref)} 
          onChange={()=>handleChange(i)} 
          />
        ))
      }
    </div>
  )
}

从“React”导入React；
导入“/styles.css”；
导出默认函数App（）{
const inputEl=React.useRef（[]）；
功能手柄更换（一）{
当前[i+1].focus（）；
}
返回(
{
新数组（3）.fill（0）.map（（n，i）=>(
inputEl.current.push（ref）}
onChange={（）=>handleChange（i）}
/>
))
}
)
}

您可以创建多个引用

功能引脚（{length，onChange，value}）{
const inputRefs=useMemo（（）=>Array（length）.fill（0）.map（i=>React.createRef（），[]）；
常数handleChange=index=>（e）=>{
//onChange（e）；//如果有多个输入，则不知道此onChange的逻辑
if（inputRefs[index+1]）inputRefs[index+1].current.focus（）；
}
返回(
{
新数组（长度）.fill（0）.map（（inp，索引）=>(
))
}
)
}

以下是一个实际可行的示例：

const{useState，useCallback，useffect，useRef}=React；
常量Pin=（{length，onChange，value}）=>{
const[val，setVal]=useState（value.split（“”））；
const[index，setIndex]=useState（0）；
常量arr=[…新数组（长度）].map(
（指数）=>指数
);
常量myRefs=useRef（arr）；
常量saveThisRef=（索引）=>（元素）=>{
myRefs.current[索引]=元素；
};
功能手柄更改（e）{
常数newVal=[…val]；
newVal[index]=e.target.value；
如果（索引<长度-1）{
setIndex（index+1）；
}
setVal（newVal）；
onChange（newVal.join（“”））；
}
const onFocus=（索引）=>（）=>{
常数newVal=[…val]；
newVal[索引]=''；
setIndex（索引）；
setVal（newVal）；
onChange（newVal.join（“”））；
};
useffect（（）=>{
if（索引(
));
};
常量应用=（）=>{
const[value，setValue]=使用状态（“”）；
const onChange=useCallback(
（值）=>设置值（值），
[]
);
console.log（'value:'，value）；
返回(
);
};
ReactDOM.render（，document.getElementById（'root'））
重新渲染包含不同数量的引用的动态引用列表的组件会引发异常（“渲染的钩子比上一次渲染时多”），如本例所示：


例如，您可以创建一个新组件，该组件渲染单个元素并保存它自己的单个引用，并使用父元素管理当前聚焦的输入，并将此数据传递给您的新组件。
您是否提前知道需要多少个组件？它是动态的，大约是
1-16
。这不是一个静态值。所以，当输入第一个字母时，您希望移动到下一个？可能重复：这是否回答了您的问题？我刚刚收到一个错误
React Hook“React.useRef”无法在回调中调用
不确定这是如何接受的应答。如果您正在typescript中查找答案：
const inputRefs:React.reobject[]=useMoom（…
perfect！这是迄今为止我所看到的最好的解决方案。这是否会导致数组不断扩展？假设您有3个输入元素。首次渲染后，数组长度将为3。但重新渲染后，这3个项目将再次推送。因此，是的，前3个数组元素保持不变，但数组长度现在为6（然后是9、12等等……）