Is it possible within react leaflet to know when a right click occurs on the map?
Currently, the onClick handler will send an event and the type will be "click"
<Map
ref="map"
preferCanvas={true}
viewport={this.props.viewport}
onClick={(e) => this.onClickHandler(e)}
>
The event from the onClick will return an object that includes "type":"click"; not specifying the left or right etc.
Related
I am working with mapbox react gl - It is working pretty nice so far... except one thing.
The user can add their hometown location to the map. When the hometown location appears, it can be clicked to view a popup. I want the user to be able to remove the location from the map from inside the popup - So I added a function that removes the location from the database when a button is clicked. The problem is when the button is inside the popup the function doesn't fire - and I have no idea why.
I have messed with the z index of the button but it seems like whenever the button is clicked, the onClose function is being called instead of my handleDeleteHome function...
Edit* If I remove the onClose function, the handleDeleteHome function fires.
Any help is appriciated! Thanks!
{selectedHome && (
<Popup
latitude={bandLocation[0]}
longitude={bandLocation[1]}
onClose={() => {setSelectedHome(null)}}
offsetLeft={23}
offsetTop={-10}
>
<div>
<h4>Home Town</h4>
<Button
onClick={(e) => {
e.preventDefault()
handleDeleteHome()
}}
color="danger">x</Button>
</div>
</Popup>
)}
Alright! Figured it out - If anyone else needs to know:
You need to add closeOnClick={false} to the popup!
I am happy I can use font-awesome in my projects. I want to put some bars as my open/close button for my menu. The icon itself is not clickable, but the small area between the icon and the border still activates the onClick. The console.log I put in my event handler shows that the icon does not pass the 'name' property needed to activate the state change. Does anyone know how to get around this?
I have tried wrapping it in span and i elements. The icon does show up, but is just not activating the onClick, probably because it is not passing the 'name' property.
My event handler:
menuClick(event) {
/*event.preventDefault();*/
const name = event.target.name;
console.log(name);
this.setState({[name]:!this.state[name]})
}
My button:
<button
name="menuOpen"
style={props.data.menuOpen ?
buttonStyle :
null}
onClick={props.menuClick}
className="menuOpenButton">
<FontAwesomeIcon name="menuOpen" icon="bars" size="3x" />
</button>
and the props are being passed to the child like this:
<Header
data={this.state}
menuClick={this.menuClick} />
Changing the event handler to look for the currentTarget fixed it.
const name = event.currentTarget.name
I have a block of code inside a <pre> element which I need it to show the explanation of few key parameters when mouse over. For example, when mouse over keyParameter a mouse over event will be triggered.
render() {
return (
<pre>
`{
keyParameter: ''
}`
</pre>
)
My question how to add an event to keyParameter in this case when the entire code-block is in the string form.
My initial thought is to do some dirty DOM manipulations and add the event listener to the target keyParameter, however, I think there might be the "right" way to implement this feature via the React way.
Below is the effect I would like to achieve,
Take a look at React's Synthetic Events.
onClick onContextMenu onDoubleClick onDrag onDragEnd onDragEnter
onDragExit onDragLeave onDragOver onDragStart onDrop onMouseDown
onMouseEnter onMouseLeave onMouseMove onMouseOut onMouseOver onMouseUp
You can attach any of these as props to your <pre> elements to attach a handler. So you would do something like:
<pre onMouseOver={e => {/* your event handler here */}>
`{
keyParameter: ''
}`
</pre>
I'm hoping to use the cross-browser React JS events listed in React Synthetic Events documentation.
I've created a small div, and am trying to capture the both mouse move (for non-touch) and click events:
....and the div...
<div id="mi-debug"
onClick={this.onClick}
onMouseMove={this.onMove}
>
The click/mouse move work fine on normal screens. On an iPad, no click event ever fires - on a tap, the "onMouseMove" event fires instead.
However, if I don't attach the onMouseMove event handler, the click event fires OK.
This is an older iPad, but I was hoping the cross-browser support advertised would handle this.
Any solutions?
Use this library to solve your react-tap-events Link is https://github.com/zilverline/react-tap-event-plugin
var injectTapEventPlugin = require("react-tap-event-plugin");
injectTapEventPlugin();
and in your render method
render: function() {
return (
<a
href="#"
onTouchTap={this.handleTouchTap}
onClick={this.handleClick}>
Tap Me
</a>
);
},
I'm using the Material-UI Tabs component in my ReactJS app.
I'm handling the onTouchTap event of the Tabs component. I'd like to pass the currently selected tab back as a parameter to the event handler.
Is this possible?
So something like this
<Tabs onChange={props.onChangePosition}
onTouchTap={e => {/* What */}>
I know that the onChange handler returns it, but I'd like to use onTouchTap in this instance.
Yes, this can be done. You need to capture a "ref" to your Tabs control, and then call getSelectedIndex() on it, inside your onTouchTap. getSelectedIndex is somewhat internal, so it has an unexpected method signature in that you must also pass it in its own props.
<Tabs
ref={ref => (this.tabs = ref)}
onTouchTap={(e) => console.log(this.tabs.getSelectedIndex(this.tabs.props))}
>
...