Question

我已经在我的反应代码中添加了DropDownButton我想要显示悬停到我的按钮上的所有选项但是我在docs中搜索我得到以下任何选项是我的代码

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

                            </DropdownButton>

任何人都可以让我知道怎么做吗？我检查了here，但Idint得到了很多想法

Answer 1

我不确定反应引导程序一般虽然您可以通过使用axios({ method : 'post', url : 'http://xxxx.xxxx.com/UserRestController.php', data : { accountId : 2 } }) .then((res) => res.json()) .then(function (response) { console.log('data', response.data); }) .catch(function (error) { console.log(error); });和onMouseEnter事件来使用香草反应

e.g。

onMouseLeave

Answer 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>

    }

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

2 个答案: