我如何将ref分配给数组映射呈现的每个元素，以及如何引用它们

Question

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

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>
    )
}

myList是我的状态的代表，并且是动态的

Answer 1

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

const ref = myList.map(() => useRef(null)) // <---- create ref array from list

myList.map((item,i) => {
    return (
      <div key={item._id} ref={ref[i]}> // <--- assign it via index
        <input type="text" value={item.value} />
      </div>
    )
}

// access it via, index
ref[I].current // <----- like this