如何在功能组件中创建动态引用 - 使用 useRef Hook

IT技术 reactjs react-hooks
2021-05-22 07:34:04

我想在具有动态呈现元素的功能组件中使用 refs。

请帮助我使用 useRef Hook 创建动态 Refs 并在处理程序中访问。

1）需要创建3个useRefs指向3个按钮。

2）使用“ref1.value”或“ref2.value”等在按钮处理程序中访问它们

    let abc=[1,2,3];
 function submitclick(){
  alert(123);
// Here i want to access the buttons with using the refs
  }
  return ( <div>
  {  abc.map(function(index){ return (<button ref='123' onClick={submitclick}>{`Button${index}`}</button>)})}
    </div>);
};

ReactDOM.render(<MyComponent name="doug" />, document.getElementById('root'));```
1个回答

refs 基本上是对象，它们有一个默认键current。所以，你可以创建一个这样的数组refs：

const myRefs= useRef([]);

然后你可以像这样填充这个 refs 数组：

ref={el => (myRefs.current[i] = el)}

这是完整版：

{
  [1, 2, 3].map((v, i) => {
    return (
      <button
        ref={(el) => (myRefs.current[i] = el)}
        id={i}
        onClick={submitClick}
      >{`Button${i}`}</button>
    );
  });
}
其它你可能感兴趣的问题
上一篇如何在 react-redux 中访问第二个组件中的存储 下一篇使用独立的 3D 打印机时，人们如何在更换颜色时装入灯丝、为打印头上漆、冲洗旧灯丝？