在反应渲染中的 concat 中动态分配 ref

Question

我有一个对象数组，是我在按下添加时创建的 button.The 添加处理函数如下所示。

const [inputList,setInputList] = useState([])

const elref=useRef(null)

const add = () => {
setInputList([...inputList,
<div>
<EditContainer

onTextChnage={handleChange}
ref={elref}
/>

</div>
}])}

这会创建多个 EditContainer 元素，所有这些元素都共享相同的元素 ref.How 我可以为一个状态为对象的动态数组动态创建这样的引用吗

Answer 1

editContainerRefs.current 将为您提供 EditContainer 个组件引用数组。

const [inputList, setInputList] = useState([]);

const editContainerRefs = useRef([])

const add = () => {
  const newRef = React.createRef()
  editContainerRefs.current.push(newRef)
  setInputList([
    ...inputList,
    <div>
      <EditContainer onTextChnage={handleChange} ref={newRef} />
    </div>
  ]);
};

在反应渲染中的 concat 中动态分配 ref

Assign ref dynamically inside concat in react render

javascript

arrays

ref

reactjs