title: Simulating a click on a React Element
body: <p>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. </p>
  
  <p>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: </p>
  
  <pre><code>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 =&gt; {
              let evt = new MouseEvent('click', {
                  bubbles: true,
                  view: window
              });
          };
          let drawControl = document.getElementsByClassName('leaflet-draw-toolbar');
          simulateClick(drawControl);
      }
      render() {
          return (
              &lt;FeatureGroup&gt;
                  &lt;EditControl
                      position="bottomright"
                      onEdited={e =&gt; {
                          e.layers.eachLayer(a =&gt; {
                              this.props.setNewPlotGeojson(a.toGeoJSON());
                          });
                      }}
                      onCreated={e =&gt; {
                          this.props.setNewPlotGeojson(e.layer.toGeoJSON());
                      }}
                      draw={{
                          marker: false,
                          circle: false,
                          rectangle: false,
                          polygon: true,
                          polyline: false,
                          circlemarker: false,
                          edit: false
                      }}
                      edit={{ edit: false }}
                  /&gt;
              &lt;/FeatureGroup&gt;
          );
      }
  }
  
  function mapStateToProps(state) {
      return {
          addingNewPlotDetails: state.plots.addingNewPlotDetails
      };
  }
  
  export default connect(mapStateToProps, actions)(DrawNewPlot);
  </code></pre>
  
  <p>Any thoughts as to what I'm doing wrong?</p>