I want to open a new page in the same tab on clicking middle mouse button.
Here is what i am trying to do...
I have a card component that contains image and footer. When i click middle mouse button on image it should open a new page in the same tab. It opens the new page in the same tab if i click left mouse button. However on clicking middle mouse button it opens the page in new tab...I want to prevent that. Below is the code.
render = () => {
return (
<div className="card">
<Link style={{textDecoration: 'none'}} to="/card/new">
<div>
<Image
/>
</div>
</Link>
<div className="footer">
<div className="info">
<h4>{model.modelname}</h4>
</div>
</div>
</div>
);
};
Can somebody guide me how to prevent the page from opening in new tab on middle mouse click? Thanks.
You can add a mouseDown event and then detect the middle button click like
handleMouseDown = (e) => {
if(e.which === 2) {
// do something on middle mouse button click
}
}
You code might look like
class MyComponent extends Component {
handleMouseDown() {
if(e.which === 2) {
// do something on middle mouse button click
// like this.props.history.push('/card/new');
}
}
render() {
<div style={{textDecoration: 'none'}} onMouseDown={this.handleMouseDown} />
}
}
export default withRouter(MyComponent);
Related
I have a dropdown menu builth with Headless UI Menu component, but the menu links inside this dropdown are not getting focused on keyboard navigation.
my code goes something like so:
function Dropdown(parent, children) {
return (
<Menu as="div" className="Submenu">
{
({close}) => (
<>
<Menu.Button>
{ parent.label }
</Menu.Button>
<Menu.Items as="ul" className="subitems">
{
children.map(child => (
<Menu.Item as="li" className="subitem" key={ child.id }>
<Link href={ child.link }>
{ child.label }
</Link>
</Menu.Item>
))
}
</Menu.Items>
</>
)
}
</Menu>
);
}
The only thing getting the focus is the <ul></ul that wraps the items, but once I press tab the dropdown closes and the focus goes to the next item on the parent level menu.
The final html rendered is this:
I've tried to add tabIndex={0} to the tags, but the output stays the same.
I also tried to create a Link wrapper component ike suggested here, but it didn't work.
I have a rectangle div box on my page that contains various elements including a Font Awesome download icon. I want to display a specific text when the user hovers over the entire div, and then I want to change that text when the download button is hovered. I see the text change/show when the div is hovered, but don't see the text change when the download button is hovered. I added a console log in the download hover and that does show up. So I'm guessing the component is not re-rendering to display the updated text.
const [viewDownloadText, setViewDownloadText] = useState('');
...
return (
<div
className={'product d-flex'}
key={product.id}
onClick={() => openPDF(product.name)}
onMouseOver={() => setViewDownloadText('Click to view')}
onMouseOut={() => setViewDownloadText('')}
>
{viewDownloadText && (
<div className={'click-text'}>{viewDownloadText}</div>
)}
<FontAwesomeIcon
className={'SDS-download'}
icon={faFileDownload}
size={'2x'}
onMouseOver={() => {
console.log('download set!');
setViewDownloadText('Click to download');
}}
onMouseOut={() => {
setViewDownloadText('Click to view');
}}
/>
</div>
);
Add button and image. When you click on the button, hide the image; when you click again, show.
<img src="https://image.flaticon.com/icons/svg/2460/2460099.svg" />
<button onClick={this.btn}>Count</button>
you can maintain a state for the same, like
{this.state.isImageVisible?<img src="https://image.flaticon.com/icons/svg/2460/2460099.svg" />:<div></div>}
<button onClick={this.btn}>Count</button>
and on click of button ,
do this
btn =() => {
this.setState({isImageVisible:!this.state.isImageVisible});
}
Hope it helps
I have multiple button on the screen , I want that user either click this button to route to the new item or user could have close this , for that i have given the close icon within the button so that user can close that if they want , but when i am trying to give onclick function to the icon within the button it does not work
how could i do that ???
Here is the demo code
https://codesandbox.io/s/material-demo-rbkr8
try wrapping it with a div onClick like this?
const doSomething = () => {
alert('click here');
}
<div onClick={doSomething}>
<DeleteIcon className={classes.rightIcon} />
</div>
I have created a button at the bottom of the page which when clicked open a modal.
Now I have a button in a header. I want that when we click on that header button it should too open the modal. That is how can we use the same function which is used for the button which is at the bottom of the page.
Button clicks should set state. State decides if modal is shown
One way of doing it with hooks is having the buttons set state with a boolean value that decides if the modal is shown.
const Component = () => {
const [modalOpen,setModalOpen] = useState(false)
return (
<div>
<button onClick={setModalOpen(true)} >
Open Modal 1
</button>
<div>
Your other content
</div>
<button onClick={setModalOpen(true)} >
Open Modal 2
</button>
<Modal show={modalOpen} />
</div>
)
}