boottrap dropdown.item Событие onClick / onSelect не работает - PullRequest
Новая
       12

boottrap dropdown.item Событие onClick / onSelect не работает

0 голосов
/ 18 июня 2019

У меня есть простое выпадающее меню с некоторыми элементами, я хочу щелкнуть по элементу для вызова функции.

по какой-то причине функция внутри onClick вызывается при загрузке компонента.и при нажатии на элемент с событием onClick ничего не происходит

onClick и onSelect ведут себя одинаково, функция handleAction вызывается при загрузке компонента DropDownMenu 

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;

1 Ответ

0 голосов
/ 18 июня 2019

Вы случайно вызвали функцию во время рендеринга.Вместо записи 

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

Попробуйте 

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