Ref动态反应

Question

假设我有一些useRef:

const mango = useRef();
const grape = useRef();
const potato = useRef();

和一些数据:

{
mango: 'yellow',
grape: 'purple',
potato: 'pc'
}

我对数据进行迭代，由于我的数据键与useRef const相同，所以我想将data的值分配给useRef，如:

key.current.value = data[i]

但是因为key.current.value在现实中不是useRef，所以它不能工作。useState可以工作，但我需要一个useRef解决方案，因为我必须使用useRef获取和设置输入字段的值。

Answer 1

您可以通过在对象

中创建它们来创建一个对象，用于基于字符串查找它们。

const myRefs = { 
'mango': useRef(); // Change 'mango' to whatever you want to lookup this ref as later
'grape': useRef();
'potato': useRef();
}

然后像这样查找它们:

const data = { 
mango: 'yellow',
grape: 'purple',
potato: 'pc'
}
const keys = Object.keys(data);
keys.forEach( key => { 
myRefs[key].current.value = data[key] // key is mango, grape, potato and matches data in both objects
})

或者其他任何你想修改或查找的内容

Answer 2

如果我在这里解释你…

记住元素上的refs也可以是函数。也就是说，你可以做

function Component() {
const inputRefs = React.useRef({});
return (
<div>
<input ref={i => inputRefs.current.foo = i} />
<input ref={i => inputRefs.current.bar = i} />
<input ref={i => inputRefs.current.quux = i} />
</div>
);
}

用这些HTML元素的引用填充inputRefs对象(或null，因为它们被卸载)。