0

怎么了？

你好，我只是在使用 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 来解决这个问题，但是以我的学习过程的名义，我确信我需要询问我遇到的这个问题。

非常感谢！

4

1 回答 1

1

更改模式中切换功能的名称，因为您在父组件和子组件中使用同名功能切换（）。在父组件或子组件中重命名toggle()，这会很好。

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

和/或也改变：

// AccountSettingModal
toggleState() {
    this.setState({
        modal: !this.state.modal
    });
}
于 2021-08-20T11:20:00.383 回答