为reacJS中的多个元素提供单独的ref属性

Question

我正在尝试构建一个简单的待办事项列表，其中可以通过单击编辑按钮来编辑每个任务，该按钮显示以前隐藏的文本字段，用户可以在其中输入当前任务的新名称，为此我需要分配一个引用到目前为止我尝试过的每项任务的价值

   let refrences = useRef([]);               
   //this is within a array.map method
   <input type='text' ref={refrences.current[index]}  /> 
   //some code here

但是refrences.current[index]总是显示为未定义，我不知道为什么会这样，但是当我尝试以下操作时（在网上找到的）

   let refrences = useRef([]);  
   //this is within a array.map method                  
   <input type='text' ref={element => refrences.current[index]=element}  /> 
   //some code here

这工作得很好，但我不知道为什么会这样。我知道这是一个箭头函数，但我无法说出“元素”代表什么，即使它尚未在其他地方定义。任何帮助将不胜感激

Answer 1

这工作得很好，但我不知道为什么会这样。

据我所知，您可以将至少两种值传递给

ref

pop：

1. 由

   useRef

返回的“参考对象”
2. 一个功能

参考对象

正如您所知，

useRef

返回具有

current

属性的对象。当您将该对象传递给

ref

属性时，React 可以将 DOM 元素分配给该属性，即类似于

ref.current = element

（说实话，我不知道 React 是否需要

current

属性。它可能只是假设 if 传递的值是一个对象，分配给它的

current

属性）

功能

但是，如果您传递一个函数，React 将使用作为参数传递的 DOM 元素来调用该函数，例如：

ref(element)

我无法说出“元素”代表什么，即使它尚未在其他地方定义。

在您的代码中，

element

是您传递给

ref

的函数的参数。它的工作原理与任何其他（回调）函数一样。函数的调用者（在本例中为 React）将为该参数提供一个值。
它本质上与

Array#forEach

和其他更高级别的函数相同：

[1, 2, 3].forEach(i => console.log(i))

在此示例中，您将一个函数传递给

forEach

，该函数具有单个参数

i

。 JavaScript 引擎将为数组中的每个元素调用该函数，并将该元素传递给该函数（因此该函数被分配给参数

i

）。

---

为什么

ref={refrences.current[index]}

不起作用？

reference.current[index]

的值不是“参考对象”。它不是具有

current

属性的对象，因此 React 无法执行

ref.current = element