Question

我有一个简单的下拉菜单，其中包含一些项目，我想单击该项目以调用函数。

由于某种原因，在加载组件时会调用onClick内部的函数。当使用onClick事件点击该项目时，没有任何反应

onClick和onSelect的行为相同，加载DropDownMenu组件时将调用handleAction函数

import React, { Component } from 'react';
import PropTypes from 'prop-types';
import DropdownButton from 'react-bootstrap/DropdownButton'
import Dropdown from 'react-bootstrap/Dropdown'

class DropDownMenu extends Component
{
    render() {
        var DropdownMenu = <DropdownButton id="dropdown-item-button" title="Actions">
                            <Dropdown.Item as="button">
                                Run check
                            </Dropdown.Item>
                            <Dropdown.Item as="button">
                                <div onClick={this.props.handleAction('sync_event')}>
                                    Sync CA
                                </div>
                            </Dropdown.Item>
                        </DropdownButton>;
        if(!this.props.isActionPossible)
        {
            DropdownMenu = <DropdownButton disabled id="dropdown-item-button" title="Actions"> </DropdownButton>;
        }
        return (
            <div>
                {DropdownMenu}
            </div>
        );
    }
}

DropDownMenu.prototypes = {
    isActionPossible: PropTypes.bool.isRequired,
    handleAction: PropTypes.func.isRequired
};

export default DropDownMenu;

Answer 1

您在渲染时不小心调用了该函数。不用写

<div onClick={this.props.handleAction('sync_event')}>

尝试

<div onClick={()=>this.props.handleAction('sync_event')}>

引导dropdown.item onClick / onSelect事件不起作用

1 个答案: