模拟点击 React 元素

Question

我正在使用带有 Leaflet 的 React，并希望在安装组件后立即启动绘图菜单，而不需要用户单击任何按钮。 React Leaflet Draw 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);

虽然我必须补充一点，以这种方式模拟鼠标点击只是为了触发一些初始副作用感觉不对。我不熟悉 Leaflet，但值得检查一下他们是否有一些 API 来设置初始状态

模拟点击 React 元素

Simulating a click on a React Element

html

events

mouseevent

reactjs