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

Question

我想在具有动态呈现元素的功能组件中使用 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'));```

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