Reactstrap dropdownitem不会触发setState

Question

发生了什么事？

您好，我只是使用reactstrap并对js做了一些反应，我对组件有一些问题。我想在单击组件内部的组件时触发show modal。这是我已经工作了一段时间的模块：

应该发生什么？

当我点击DropdownItem中的div

时，我希望它能触发setState

// Base Account placeholder component <PARENT>
export class Account extends React.Component {
    constructor(props) {
        super(props);

        this.toggle = this.toggle.bind(this);
        this.state = {
            dropDownOpen : false
        };
    }

    toggle() {
        this.setState({
            dropDownOpen : !this.state.dropDownOpen
        });
    }

    render() {
        return (
            <Dropdown isOpen={this.state.dropDownOpen} toggle={this.toggle}>
                <DropdownToggle nav caret>
                    Account
                </DropdownToggle>
                <DropdownMenu>
                    <DropdownItem>
                        <div onClick={() => console.log("fire pew pew")}>
                        <AccountSettingModal />
                    </div>
                    </DropdownItem>
                    <DropdownItem>
                        Pricings
                    </DropdownItem>
                    <DropdownItem divider />
                    <DropdownItem>
                        Logout
                    </DropdownItem>
                </DropdownMenu>
        </Dropdown>
    );
}

}

这是我要展示的模式：

// Base account placeholder for Modal Setting
class AccountSettingModal extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            modal: false
        };

        this.toggle = this.toggle.bind(this);
    }

    toggle() {
        this.setState({
            modal: !this.state.modal
        });
    // console.log("modalSetting: " + this.state.modalSetting);
    }

    render() {
        return (
            ****************! trigger this when i click the dropdownitem !*********************
            <div onClick={this.toggle}>
                <a>Setting</a>
                <Modal isOpen={this.state.modal} toggle={this.toggle} className="account-setting-box">
                    <ModalHeader toggle={this.toggle}>Setting</ModalHeader>
                    <ModalBody className="scroll">
                    </ModalBody>
                    <ModalFooter className="modal-footer">
                    </ModalFooter>
                </Modal> 
            </div>
        );
    }
}

非常感谢，因为我已经处理了这个问题大约两天了。我可以使用custommenu来解决这个问题，但是以我的学习过程为名，我确信我需要问一下这个问题。

非常感谢！