Reactstrap dropdownitem 未触发 setState答案

【问题标题】：Reactstrap dropdownitem not triggering setStateReactstrap dropdownitem 未触发 setState
【发布时间】：2018-06-24 17:36:43
【问题描述】：

发生了什么？

你好，我只是在使用 reactstrap 和 react js，我对组件有一些问题。当我单击组件内的组件时，我想触发显示模式。这是我已经工作了一段时间的模块：

应该发生什么？

我希望它在我单击 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 来解决这个问题，但是以我的学习过程的名义，我确信我需要询问我遇到的这个问题。

非常感谢！ ????

【问题讨论】：

我猜问题是你在父子组件中使用了同名函数toggle()，尝试在父子组件中重命名toggle()。
这也是我沉迷于这个问题的假设之一。我试图将子函数中的函数更改为toggleModal()，但无济于事，它不起作用。我也更改了州的名称，但它没有用。你有其他建议吗？

标签： javascript reactjs reactstrap

【解决方案1】：

在模态中更改切换函数的名称，因为您在父组件和子组件中使用同名函数 toggle()。在父组件或子组件中重命名 toggle() 就可以了。

// Account
toggleDropdown() {
    this.setState({
        dropDownOpen : !this.state.dropDownOpen
    });
}

和/或也改变：

// AccountSettingModal
toggleState() {
    this.setState({
        modal: !this.state.modal
    });
}

【讨论】：