リアクションエレメントのクリックをシミュレートする

Question

リーフレットを使用しています。ユーザーがボタンをクリックすることなく、コンポーネントのマウント時にすぐに描画メニューを起動します。 React Leaflet Draw APIは少し不透明ですが、これを簡単にするために私がしたいのは、ユーザーがいなくても、プログラム上で適切なボタンをクリックすることです。私はボタンを隠すでしょう。

問題は、私が.click（）またはMouseEvent（ 'クリック'）APIを使用しても不運ではないということです。後者での私の試みは次のとおりです。

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

私が間違っていることは何ですか？

Answer 1

あなたのsimulateClickメソッドはイベントを作成しますが、それをディスパッチしません。追加を試みてくださいelem.dispatchEvent(evt);

私はこの方法でマウスのクリックをシミュレートする必要がありますが、初期の副作用を引き起こすには間違っていると感じます。私はリーフレットに慣れていませんが、初期状態を設定するためのAPIがあるかどうか確認する価値があります