Simulating a click on a React Element

Question

I'm using React with Leaflet, and want to launch the drawing menu immediately upon the component mounting, without making the user click any buttons. The React Leaflet Draw API is a bit opaque on this, and what I'd like to do to make this simple is to trigger a click on the appropriate button programmatically, without the user having to. I'll then hide the button.

The trouble is that I'm not having any luck either using the .click() or the MouseEvent('click') APIs. Here's my attempt at the latter:

import React, { Component } from 'react';
import { connect } from 'react-redux';
import * as actions from '../../../actions';
import { Polygon, FeatureGroup } from 'react-leaflet';
import { EditControl } from 'react-leaflet-draw';

export class DrawNewPlot extends Component {
    componentDidMount() {
        let simulateClick = elem => {
            let evt = new MouseEvent('click', {
                bubbles: true,
                view: window
            });
        };
        let drawControl = document.getElementsByClassName('leaflet-draw-toolbar');
        simulateClick(drawControl);
    }
    render() {
        return (
            <FeatureGroup>
                <EditControl
                    position="bottomright"
                    onEdited={e => {
                        e.layers.eachLayer(a => {
                            this.props.setNewPlotGeojson(a.toGeoJSON());
                        });
                    }}
                    onCreated={e => {
                        this.props.setNewPlotGeojson(e.layer.toGeoJSON());
                    }}
                    draw={{
                        marker: false,
                        circle: false,
                        rectangle: false,
                        polygon: true,
                        polyline: false,
                        circlemarker: false,
                        edit: false
                    }}
                    edit={{ edit: false }}
                />
            </FeatureGroup>
        );
    }
}

function mapStateToProps(state) {
    return {
        addingNewPlotDetails: state.plots.addingNewPlotDetails
    };
}

export default connect(mapStateToProps, actions)(DrawNewPlot);

Any thoughts as to what I'm doing wrong?

luanped · Accepted Answer · 2017-12-31 13:14:55Z

3

Your simulateClick method creates the event, but never dispatches it. Try adding elem.dispatchEvent(evt);

Although I must add that simulating mouse click this way just to trigger some initial side effect feels wrong. I am not familiar with Leaflet, but it could be worth checking if they have some API to set initial state

answered Dec 31, 2017 at 13:14

luanped

3,1982 gold badges30 silver badges40 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

luanped Over a year ago

Another issue i noticed in your code above, getElementsByClassName returns an array, not a single element, try logging out and see if that classname matches with only 1 element, if so, you shoud also add [0] at the end, i.e. document.getElementsByClassName('leaflet-draw-toolbar')[0];

Collectives™ on Stack Overflow

Simulating a click on a React Element

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related