如何在反应引导程序中显示悬停选项答案

【问题标题】：how to show options on hover in react bootstrap如何在反应引导程序中显示悬停选项
【发布时间】：2018-01-07 03:22:51
【问题描述】：

我在我的反应代码中添加了 DropDownButton 我想在悬停时显示所有选项到我的按钮，但我在文档中搜索我没有得到任何选项，下面是我的代码

<DropdownButton
                                bsSize="small"
                                className="ddown"
                                role="menuitem"
                                title="Prgoram Profile">
                                <MenuItem href="#books">Books</MenuItem>

                            </DropdownButton>

谁能告诉我怎么做？我检查了here，但我得到了很多想法

【问题讨论】：

标签： reactjs twitter-bootstrap-3 react-bootstrap

【解决方案1】：

虽然您可以通过使用 onMouseEnter 和 onMouseLeave 事件来使用香草反应，但我不确定一般反应引导程序

例如

import React, { Component } from 'react'

export default class SomeComponent extends Component {
    constructor() {
        super();

        this.state = {
            show: false
        }
    };

    render() {
        return (
            <DropdownButton
            bsSize="small"
            className="ddown"
            role="menuitem"
            title="Program Profile"
            onMouseEnter={(e) => this.setState({ show: true })}
            onMouseLeave={(e) => this.setState({ show: false })}
            open={this.state.show}>
            <MenuItem href="#books">Books</MenuItem>

            </DropdownButton>
        );
    };
}

【讨论】：

我一直在查看 react bootstrap 文档，你上面得到的错误是因为你必须在构造函数中初始化状态。
查看上述编辑。在查看了 react-bootstrap 模块的上下文之后，我认为上面应该可以工作
我试过很遗憾它无法理解这个事件。:(
^ 检查上述文档，看看是否有帮助
太棒了，如果你能正常工作，我将不胜感激：)

【解决方案2】：

此解决方案效果很好，但如果您的组件中有多个 DropdownButton，当您将鼠标悬停在其中一个上时，它会同时打开所有菜单...

所以基于canaan 解决方案并根据我的场景我做了这样的事情：

createNavDropDownItem(item, index, id) {

        const tabsArray = item.Children.filter(item => !item.notATab);
        const items = tabsArray.map((item, index) => (<MenuItem {...this.getSharedProps(item, index)}>
            <a>{SDK.RequestBuilderUtils.getFormatMessage(this.language, this.messages, item.Name, item.Name)}</a>
        </MenuItem>));
        return <NavDropdown
            {...this.getSharedProps(item, index)}
            onMouseEnter={(e) => this.setState({ [`show-${index}`]: true })}
            onMouseLeave={(e) => this.setState({ [`show-${index}`]: false })}
            open={this.state[`show-${index}`]}
        >
            {items}
        </NavDropdown>

    }

【讨论】：