Question

我的header.js组件中有一个切换图标，点击后我想更改侧边栏组件中元素的类，以便更改其宽度并将其最小化为宽度的一半。做出反应的最佳方式是什么？我的标题组件上有一个toggleSidebar函数，用于检查其状态并将其更改为onclick，但我不确定从何处开始？

header.js：

Require

sidebar.js：

import React from "react";

export class Header extends React.Component {
    constructor(props) {
        super(props);

        this.toggleSidebar = this.toggleSidebar.bind(this);
        this.state = {
            isToggled: false
        }
    }

    toggleSidebar() {
        if(this.state.isToggled) {
            this.setState({
                isToggled: false
            })

        } else {
            this.setState({
                isToggled: true
            })
        }
    }

    render() {
        return (
            <nav className="navbar navbar-toggleable-md navbar-light bg-faded">
                <button className="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
                    <span className="navbar-toggler-icon"></span>
                </button>
                <a className="navbar-brand" href="#" onClick={this.toggleSidebar}><span className="fa fa-bars" aria-hidden="true"></span></a>

                <div className="collapse navbar-collapse" id="navbarSupportedContent">
                    <ul className="navbar-nav ml-auto">
                        <li className="nav-item active">
                            <a className="nav-link" href="#"><img alt="User DP" className="header__user__img img-fluid rounded-circle" src="../resources/img/user.jpg" /> Mark Hughes</a>
                        </li>
                    </ul>
                </div>
            </nav>
        );
    }
}

来自另一个组件onClick的目标元素 - React JS

0 个答案: