Einen Klick auf ein React Element simulieren

Question

Ich verwende React with Leaflet und möchte das Zeichnungsmenü sofort nach der Komponentenmontage starten, ohne dass der Benutzer auf eine Schaltfläche klicken muss. Die React Leaflet Draw-API ist ein bisschen undurchsichtig, und was ich tun möchte, um dies einfach zu machen, ist, einen Klick auf die entsprechende Schaltfläche programmgesteuert auszulösen, ohne dass der Benutzer dies tun muss. Ich werde dann den Knopf verstecken.

Das Problem ist, dass ich kein Glück habe, entweder mit den .click() oder die MouseEvent ("Klick") APIs. Hier ist mein Versuch, letzteres:

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); 

Irgendwelche Gedanken, was ich falsch mache?

Answer 1

Ihre simulateClick-Methode erstellt das Ereignis, löst es jedoch nie aus. Versuchen Sie, elem.dispatchEvent(evt);

hinzuzufügen Obwohl ich hinzufügen muss, dass simulierende Mausklick auf diese Weise, nur um einige anfängliche Nebenwirkung auszulösen, fühlt sich falsch an. Ich bin nicht vertraut mit Leaflet, aber es könnte sich lohnen zu überprüfen, ob sie einige API haben, um den ursprünglichen Zustand