首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
社区首页 >问答首页 >侧栏DOM与Navbar重叠,将其从DOM中删除。

侧栏DOM与Navbar重叠,将其从DOM中删除。
EN

Stack Overflow用户
提问于 2018-11-19 13:06:54
回答 2查看 73关注 0票数 2

当用户点击汉堡包菜单时,问题是当用户单击汉堡菜单时,侧边栏出现,但导航栏消失,我如何在不相互叠加的情况下同时呈现导航条和侧栏?

代码语言:javascript
代码运行次数:0
运行
复制
var app = document.getElementById('app');

class Navbar extends React.Component {
    constructor(props) {
        super(props);
        this.state = { 
            sidebarOn: false
        };
        this.onClickOpen = this.onClickOpen.bind(this);
    }
    
    onClickOpen(open) {
        console.log(open);
        if(open) {
            this.setState({sidebarOn: open});
            Menu();
        }
        
    }
    render() {
        return(
            <div>
            <header>    
            <nav class="navbar navbar-custom sticky-top">
                <a class="navbar-brand" href="#">TO DO LIST</a>
                <a class="burger-menu" href="#"><img src='/images/hamburger-icon.png' onClick={() => this.onClickOpen(true)}></img></a>
            </nav>
            </header>
        </div>
        );
    }
}



function Menu() {
    class Parent extends React.Component {
        constructor() {
            super();
            this.state = {
                burgerOn: "burger-right"
            };
        }
      render() {
        return (
            <div class={this.state.burgerOn}>
                      <div class="container">
                <form >
                    <div class="form-group task-title">
                    <label for="title">
                        Task Title
                    </label>
                    <input type="title" class="form-control" placeholder="Enter Task Title"></input>
                    </div>
                    <div class="form-group task-desc">
                        <label for="desc">Task Description</label>
                        <textarea type="text" class="form-control" id="desc" placeholder="Enter Task Description" rows="5"></textarea>
                    </div>
                </form>
                <div>
                <button type="button" class=" task-btn btn btn-primary">Create</button>
                </div>
                </div>
            </div>
        );
      } 
    }
    ReactDOM.render(<Parent />, app);
}

ReactDOM.render(<Navbar />, app);
代码语言:javascript
代码运行次数:0
运行
复制
var app = document.getElementById('app');

class Navbar extends React.Component {
    constructor(props) {
        super(props);
        this.state = { 
            sidebarOn: false
        };
        this.onClickOpen = this.onClickOpen.bind(this);
    }
    
    onClickOpen(open) {
        console.log(open);
        if(open) {
            this.setState({sidebarOn: open});
            Menu();
        }
        
    }
    render() {
        return(
            <div>
            <header>    
            <nav class="navbar navbar-custom sticky-top">
                <a class="navbar-brand" href="#">TO DO LIST</a>
                <a class="burger-menu" href="#"><img src='/images/hamburger-icon.png' onClick={() => this.onClickOpen(true)}></img></a>
            </nav>
            </header>
        </div>
        );
    }
}



function Menu() {
    class Parent extends React.Component {
        constructor() {
            super();
            this.state = {
                burgerOn: "burger-right"
            };
        }
      render() {
        return (
            <div class={this.state.burgerOn}>
                      <div class="container">
                <form >
                    <div class="form-group task-title">
                    <label for="title">
                        Task Title
                    </label>
                    <input type="title" class="form-control" placeholder="Enter Task Title"></input>
                    </div>
                    <div class="form-group task-desc">
                        <label for="desc">Task Description</label>
                        <textarea type="text" class="form-control" id="desc" placeholder="Enter Task Description" rows="5"></textarea>
                    </div>
                </form>
                <div>
                <button type="button" class=" task-btn btn btn-primary">Create</button>
                </div>
                </div>
            </div>
        );
      } 
    }
    ReactDOM.render(<Parent />, app);
}

ReactDOM.render(<Navbar />, app);
代码语言:javascript
代码运行次数:0
运行
复制
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.0/react-dom.min.js"></script>
<!DOCTYPE html>
<html>
<head> 
        <script src="https://unpkg.com/react@16/umd/react.production.min.js"></script>
        <script src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>
        <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
</head>
<body>   
        <div id="app"></div>
        <script type="text/babel" src="/js/app.js"></script>    
</body>
</html>

如片段所示,如果单击损坏的图像链接,我的表单将覆盖todolist导航条。

(非常感谢你所给予的建设性帮助:)

EN

回答 2

Stack Overflow用户

回答已采纳

发布于 2018-11-19 15:41:56

我通过a_m_dev的帮助解决了我的问题,然后添加了一个条件语句来检查类是否打开,如下所示:

代码语言:javascript
代码运行次数:0
运行
复制
        class App extends React.Component {
        render() {
            return(
                <div>
                    <Navbar/>
                </div>
            );
        }
    }


    class Navbar extends React.Component {
        constructor() {
            super();
            this.state = {
                burgerOn: false
            }
        }
        clickHandler(open) {
            this.setState({burgerOn: open});
        }
        render() {
            return(
                <div>
                <header>    
                <nav class="navbar navbar-custom sticky-top">
                    <a class="navbar-brand" href="#">TO DO LIST</a>
                    <a class="burger-menu" href="#"><img src='/images/hamburger-icon.png' onClick={() => this.clickHandler(true)}></img></a>
                </nav>
                </header>
                <div>
                    {this.state.burgerOn ? <Parent/> : null}
                </div>
            </div>

            );
        }
    }

    class Parent extends React.Component {

        constructor() {
            super();
            this.state = {
                burgerOn: "burger-right"
            };
        }
        render() {
        return (
            <div class={this.state.burgerOn}>
                      <div class="container">
                <form >
                    <div class="form-group task-title">
                    <label for="title">
                        Task Title
                    </label>
                    <input type="title" class="form-control" placeholder="Enter Task Title"></input>
                    </div>
                    <div class="form-group task-desc">
                        <label for="desc">Task Description</label>
                        <textarea type="text" class="form-control" id="desc" placeholder="Enter Task Description" rows="5"></textarea>
                    </div>
                </form>
                <div>
                <button type="button" class=" task-btn btn btn-primary">Create</button>
                </div>
                </div>
            </div>
        );
      }
    }




ReactDOM.render(<App/>, app);

我希望这对有同样问题的人有所帮助:)

票数 0
EN

Stack Overflow用户

发布于 2018-11-19 13:23:18

问题在于,当您想要呈现侧栏菜单时,您使用的是以下代码

代码语言:javascript
代码运行次数:0
运行
复制
ReactDOM.render(<Parent />, app);

这意味着只需在html文件中插入app元素中的组件。其结果将类似于删除先前呈现的组件和呈现新组件。这就是你在这里看到的:

代码语言:javascript
代码运行次数:0
运行
复制
...some code
          } 
        }
        ReactDOM.render(<Parent />, app); <---- here
    }

    ReactDOM.render(<Navbar />, app); <---- and here

... morecode

您不需要直接呈现根元素中刚刚创建的每个组件。--您只需要在其中呈现最高级的组件--所有其他组件都应该嵌套在父组件中,这样您就只能从html文件在根元素中呈现一个父组件,并且通过在父组件中导入这些组件并在其中使用它们,将所有其他组件都包含在其中,如下所示:

代码语言:javascript
代码运行次数:0
运行
复制
import React from 'react'
import ReactDOM from 'react-dom'

import B from './B'

class A extends React.component {
   render() {
     return(
       <div>
         <B />
       </div>
     )
   }
}


ReactDOM.render(
  <A />,
  document.querySelector('#app')
)
票数 1
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/53375329

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档