功能组件中 Popper 的 AnchorEl

Question

我如何在 this 不可用的功能组件中使用AnchorEl 弹出窗口。在扩展React.Component 的组件中，我可以在按钮上使用buttonRef={node => { this.anchorEl = node;}}，然后在popper 中设置anchorEl={this.anchorEl}。但是现在我想将我的组件切换为使用 Hooks 并在AnchorEl 中遇到这个问题。你能帮忙吗？

Answer 1

你可以使用useRef()钩子，见：https://reactjs.org/docs/hooks-reference.html#useref。

在函数顶部创建引用，

let buttonEl=React.useRef(null);

分配它，

... buttonRef={buttonEl} ...

使用它，

... anchorEl={buttonEl} ...