How to show parameters when hovering in reaction loading
I have added DropDownButton to my react code. I want to show all the options on hover over my button, but I have searched in the docs. I don't know how to do it, this is my code
<DropdownButton
bsSize="small"
className="ddown"
role="menuitem"
title="Prgoram Profile">
<MenuItem href="#books">Books</MenuItem>
</DropdownButton>
Can someone please let me know how to do this? I checked here but Idint got a lot of ideas
+3
source to share
2 answers
I don't know how to react to loading in general, although you can use vanilla react using events onMouseEnter
andonMouseLeave
eg.
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>
);
};
}
+2
source to share
this solution works great, but if you have multiple DropdownButton in your component, it will open all menus immediately when you hover one of them ...
so based on canaan solution and according to my scenario I did something like this:
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>
}
0
source to share