模拟对React元素的单击

Question

我使用的反应与传单，并希望启动绘图菜单立即在组件安装，而不让用户点击任何按钮。React传单绘制API对此有点不透明，我想要做的是通过编程方式触发对适当按钮的单击，而不需要用户这样做。然后我就把按钮藏起来。

问题是，无论是使用.click()还是使用MouseEvent('click') 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来设置初始状态，那就值得一查了。