Question

我希望功能组件中的引用具有动态呈现的元素。

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

1）需要创建3个useRef来指向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

ref基本上是对象，并且它们具有默认键current。因此，您可以像这样创建refs的数组：

const myRefs= useRef([]);

然后，您可以像这样填充此ref数组：

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

查看有关https://stackblitz.com/edit/react-q7w5rn的演示示例

（单击按钮，然后在控制台上查看输出。）

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

1 个答案: