Reactjs 如何为数组映射呈现的每个元素指定ref，以及如何引用它们

我需要的是：我需要为每个div分配特定的ref，这样我就可以在每个特定的输入字段外检测到单击，但是由于项目是通过映射呈现的，所以所有div都具有相同的引用。例如，当我单击item2的div时，它会检测到它是ref，因此不会触发警报

const ref = useRef(null)

const handleClickOutside = (e) => {
    if (ref.current && !ref.current.contains(e.target)) {
      alert('clicked')
    }
}

useEffect(() => {
    document.addEventListener('click', handleClickOutside, true)

    return () => {  
      document.removeEventListener('click', handleClickOutside, true)
    }
})


myList = ['item1', 'item2', 'item3']

myList.map(item => {
    return (
      <div key={item._id} ref={ref}>
        <input type="text" value={item.value} />
      </div>
    )
}

const ref=useRef（空）
常量handleClickOutside=（e）=>{
如果（参考当前和&！参考当前包含（e.目标））{
警报（'单击'）
}
}
useffect（（）=>{
document.addEventListener（'click'，handleclickout，true）
return（）=>{
document.removeEventListener（'click'，handleClickOutside，true）
}
})
myList=['item1'，'item2'，'item3']
myList.map（项=>{
返回(
)
}

---

myList表示我的状态，是动态的

将引用初始化为数组，并为每个索引分配相关引用

const listRef = useRef([]);

myList.map((item, i) => {
  return (
    <div key={item._id} ref={(ref) => (listRef.current[i] = ref)}>
      <input type="text" value={item.value} />
    </div>
  );
});

// Now each array entry contains a reference to `div` element.
// access the reference through index.
listRef.current[i].contains(e.target);

---

将引用初始化为数组，并为每个索引分配相关引用

const listRef = useRef([]);

myList.map((item, i) => {
  return (
    <div key={item._id} ref={(ref) => (listRef.current[i] = ref)}>
      <input type="text" value={item.value} />
    </div>
  );
});

// Now each array entry contains a reference to `div` element.
// access the reference through index.
listRef.current[i].contains(e.target);