在反应中，如何使用 map 向元素添加多个 ref？

小编典典

在反应中，如何使用 map 向元素添加多个 ref？

javascript

export default function RenderPages({storage, setStorage, state, setState}){
const elRefs=[]
for(let i=0; i<storage[state.currentFolderId][state.currentFileId].content.length; i++){
    elRefs.push(useRef())
}

return (
    <>
    {
      renderable
      ?<div className="writing">
        {storage[state.currentFolderId][state.currentFileId].content.map((page, index)=>
        <div className='textarea'>
          <textarea ref={elRefs[index]} placeholder='write here' value={page} id={"page"+index} onChange={(e)=>onChange(e, index)} rows={rows} cols={cols}></textarea>
        </div>)}
      </div>
      : <></>
    }
    </>
  )
}

我想将多个 ref 附加到随机数的“textarea”元素。元素的数量将由作为道具给出的变量“存储”确定。上面的代码出错了。请帮帮我。

阅读 87

2022-07-26

共1个答案

小编典典

您不需要使用for循环来推送 ref 中的元素，您已经使用mapin您可以像这样使用 refreturn推送元素，因为您可以看到下面的代码，我希望这可行。textarea谢谢

import { useRef } from "react";

export default function RenderPages({storage, setStorage, state, setState}) {
  const elRefs = useRef([]);

  return (
    <>
      {renderable ? (
        <div className="writing">
          {storage[state.currentFolderId][state.currentFileId].content.map((page, index) => (
            <div className="textarea">
              <textarea
                ref={ref => {
                  elRefs.current[index] = ref
                }}
                placeholder="write here"
                value={page}
                id={'page' + index}
                onChange={e => onChange(e, index)}
                rows={rows}
                cols={cols}></textarea>
            </div>
          ))}
        </div>
      ) : (
        <></>
      )}
    </>
  );
}

2022-07-26