自定义组件上的 OverlayTrigger 不起作用 [英] OverlayTrigger on custom component not working

问题描述

我试图在自定义组件(按钮)悬停时显示弹出框:

I'm trying to show a Popover when a custom component (a button) is hovered:

class MyComponent extends React.PureComponent<MyComponentProperties>  {
    public render(): JSX.Element {
        const overlay: JSX.Element = (
            <Popover id={this.uuid}>
                <Popover.Content>
                    Hello world!
                </Popover.Content>
            </Popover>
        );

        return <OverlayTrigger trigger="hover" placement="auto" delay={{show : 700, hide : 0}} overlay={overlay}>
            <MyFancyButton ... />
        </OverlayTrigger >
    }
}

class MyFancyButton extends React.PureComponent<MyFancyButtonProperties> {
    public render(): JSX.Element {
        return <button ...>Hover me!</button>
    }
}

弹出框不显示.但是，如果我将 MyComponent 的 render 函数的返回值更改为:

The Popover doesn't show. However, it works if I change the return of the render function of MyComponent to:

return <OverlayTrigger trigger="hover" placement="auto" delay={{show : 700, hide : 0}} overlay={overlay}>
    <button>Hover me!</button>
</OverlayTrigger >

我检查了 https://react-bootstrap.github.io/components/overlays/#overlay-trigger 它说:

请注意，触发组件必须能够接受一个引用，因为它会尝试添加一个引用.您可以将 forwardRef() 用于函数组件.

Note that triggering components must be able to accept a ref since will attempt to add one. You can use forwardRef() for function components.

我不知道该怎么做.我尝试在 MyFancyButtonProperties 中添加一个 ref 属性并将其转发到 button，但它不起作用:

I'm not sure how to do this. I tried adding a ref property in MyFancyButtonProperties and forwarding it to button, but it doesn't work:

class MyFancyButton extends React.PureComponent<MyFancyButtonProperties> {
    public render(): JSX.Element {
        return <button ref={this.props.ref} ...>Hover me!</button>
    }
}

我的版本:

• 响应 16.8.6
• React 引导程序 1.0.0-beta.14

推荐答案

我终于在这里找到了解决方案:https://github.com/react-bootstrap/react-bootstrap/issues/2208#issuecomment-301737531

I finally found a solution here: https://github.com/react-bootstrap/react-bootstrap/issues/2208#issuecomment-301737531

我将MyComponent的render函数修改为

return <OverlayTrigger trigger="hover" placement="auto" delay={{show : 700, hide : 0}} overlay={overlay}>
    <span><MyFancyButton ... /></span>
</OverlayTrigger >

现在它可以工作了.

这篇关于自定义组件上的 OverlayTrigger 不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！