时间戳

首页 > 解决方案 > 将 useRef 与 Array 反应以实现动态

reactjs - 将 useRef 与 Array 反应以实现动态

问题描述

我正在尝试使每个字母输入时焦点移动到下一个输入的组件。

我想我需要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>
  )
}

标签： reactjsreact-hooks

解决方案

您可以创建多个参考

function PIN({length, onChange, value}){
  const inputRefs = useMemo(() => Array(length).fill(0).map(i=> React.createRef()), []);
  const handleChange = index => (e) => {
    //onChange(e); // don't know about the logic of this onChange if you have multiple inputs
    if (inputRefs[index + 1]) inputRefs[index + 1].current.focus(); 
  }
  return (
    <div>
      {
        new Array(length).fill(0).map((inp, index)=>(
          <input type="text" ref={inputRefs[index]} onChange={handleChange(index)} />
        ))
      }
    </div>
  )
}

推荐阅读