时间戳

首页 > 解决方案 > Ref 动态反应

reactjs - Ref 动态反应

问题描述

假设我有一些 useRef：

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

还有一些数据：

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

我遍历数据，由于我的数据键与 useRef const 相同，所以我想将数据的值分配给 useRef，例如：

key.current.value = data[i]

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

标签： reactjsreact-hooks

解决方案

如果我在这里为你翻译...

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

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

inputRefs使用对这些 HTML 元素的引用填充对象（或null在它们被卸载时）。

推荐阅读