React-单击以展开元素并隐藏其他元素

时间：2018-10-12 05:11:03

标签： css reactjs expand

我是新来的人，对编程来说还是很新的。

我正在使用react并希望在单击时展开一个框，而同时隐藏其他3个框。现在，我刚刚在单击时添加了一个“隐藏”类（之所以这样命名，因为“隐藏”实际上是一个功能），并发送警报。

想要扩展的区域几乎完全是窗口大小，因为它将容纳内容。然后在其顶部添加一个导航栏。下面是概念，而我当前的代码在其下面的沙箱中。

Concept

到目前为止，这是该组件以及相应的CSS和html的代码。 Code Sandbox 

import React, { Component } from 'react';


// onclick= (this.expand)
//outside of render:
// expand =(e) => {
//   e.target (targets the one they clicked on)
//   hide every other element of the class add a class to e.target to increase width and height
//   add div to top with nav
// }

class AdminPanel extends Component {
  constructor(){
    super();
  }

  expand = (event) => {
    event.preventDefault();

    var elements = document.querySelectorAll('.title');
    debugger;
    for (var i=0; i<elements.length; i++){
      elements[i].classList.add('hidee');
      //hide everything except the one we clicked on
        //if event.target != elements[i] then add a class of hidee
      //add a class to event.target called expand

      //make a css file and put in hidee and expand classes and put the css in
      //import that css file at the top of this file
    }

    alert('hi');

  }

  render(){
    return (
      <div class="box">
    <div class="container">
     	<div class="row">
      <div className="col-sm-6 ">
       <a href="#"/>

       <div class="box-part text-center">
         <div class="title" onClick={this.expand}>
           <img class="card-img-top" src="https://visualpharm.com/assets/224/Folder-595b40b85ba036ed117dd27b.svg" alt=" image"/>

         </div>
         <div className="text">
              <span><h2>Thought Archives</h2></span>
         </div>
        </div>
     </div>

				 <div className="col-sm-6 ">
					<a href="#"/>

					<div class="box-part text-center">
						<div class="title" onClick={this.expand}>
							<img class="card-img-top" src="https://visualpharm.com/assets/168/Read%20Message-595b40b75ba036ed117d88f5.svg" alt=" image"/>
						</div>
						<div className="text">
                <span><h2>Incoming Requests</h2></span>
						</div>
					 </div>
				</div>

        <div className="col-sm-6 ">
         <a href="#"/>
         <div class="box-part text-center">
           <div class="title" onClick={this.expand}>
             <img class="card-img-top" src="https://visualpharm.com/assets/375/Create-595b40b75ba036ed117d7bbf.svg" alt=" image"/>

           </div>
           <div className="text">
               <span><h2>Create New</h2></span>
           </div>
          </div>
       </div>

       <div className="col-sm-6 ">
        <a href="#"/>

        <div class="box-part text-center">
          <div class="title" onClick={this.expand}>
            <img class="card-img-top" src="https://static.thenounproject.com/png/5040-200.png" alt=" image"/>

          </div>
          <div className="text">
               <span><h2>Your Community</h2></span>
          </div>
         </div>
      </div>

		</div>
    </div>
</div>
)
  }
}



export default AdminPanel;
/* css for AdminPanel.js*/
@import url('https://fonts.googleapis.com/css?family=Josefin+Sans:100,300,400,600,700');

body{
    background: #f2f2f2;
    font-family: 'Josefin Sans', sans-serif;
}

h3{
     font-family: 'Josefin Sans', sans-serif;
}

.box{
    padding:60px 0px;
}

.card-img-top {
  height: 100px;
    width: 30%;
}

.box-part{
    background:#FFF;
    border-radius:10px;
    padding:60px 10px;
    margin:30px 0px;
}

.box-part:hover{
    background:#4183D7;
}

.box-part:hover .fa ,
.box-part:hover .title ,
.box-part:hover .text ,
.box-part:hover a{
    color:#FFF;
    -webkit-transition: all 1s ease-out;
    -moz-transition: all 1s ease-out;
    -o-transition: all 1s ease-out;
    transition: all 1s ease-out;
}

.text{
    margin:20px 0px;
}

.fa{
     color:#4183D7;
}
/* end css for adminPanel.js*/
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="theme-color" content="#000000">
    
    <link rel="manifest" href="%PUBLIC_URL%/manifest.json">
 

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <title>React App</title>
  </head>
  <body>
    <noscript>
      You need to enable JavaScript to run this app.
    </noscript>
    <div id="root"></div>
 


  </body>
</html>

3 个答案:

答案 0 :(得分：1)

使用setState更新扩展功能中组件的状态。当状态更改为true时，render方法将获取新状态。

 constructor(){
    super();

     this.expand = this.expand.bind(this);
     this.state = {
       hide: !this.state.hide
     };
  }


  expand = (event) => {
    event.preventDefault();

    this.setState({
       hide: true
    });

    alert('hi');

  }


  { this.state.hide ? 

     <div className="col-sm-6 ">
                <a href="#"/>

                <div class="box-part text-center">
                    <div class="title" onClick={this.expand}>
                        <img class="card-img-top" src="https://visualpharm.com/assets/168/Read%20Message-595b40b75ba036ed117d88f5.svg" alt=" image"/>
                    </div>
                    <div className="text">
            <span><h2>Incoming Requests</h2></span>
                    </div>
                 </div>
            </div>



  : null }

答案 1 :(得分：1)

如果我是您，我肯定会将div类的title拆分为一个单独的组件，并拥有包含每个div每个需求的初始数据。 / p>

如果这样做，则只需要遍历数据源并渲染要渲染的元素。结果，您可以显示/隐藏navbar。

我创建了一个sandbox，您可以在其中查看如何控制组件的状态以及相应地呈现所需内容。

  

假设每个div被称为card

希望有帮助！

答案 2 :(得分：0)

您可以轻松地按以下步骤进行操作：

class AdminPanel extends React.Component {

  state = {
    //Create sections obj in state to maintain your section's class
    sections : {
      thoughtArchives: {
        key: 1,
        class: 'hidee',
        //add extra data if you want for further use
      },
      incomingRequests: {
        key: 2,
        class: 'hidee'
      },
      createNew: {
        key: 3,
        class: 'hidee'
      },
      yourCommunity: {
        key: 4,
        class: 'hidee'
      }
    }
  }

  constructor(props) {
    super(props);
  }

  expand = (sectionKey) => {
    //get the prevState
    this.setState(prevState => {
      //if key matches with section to expand add expand class or add hidee class
      for (let k in prevState.sections) {
        prevState.sections[k].class = prevState.sections[k].key === sectionKey ? 'expand' : 'hidee'
      }
      //return sections to update state
      return prevState
    })
  }

  render() {
    let {sections} = this.state;
    return (<div className="box">
      <div className="container">
        <div className="row">
          <div className="col-sm-6 ">
            <a href="#"/>
            <div className="box-part text-center">
              {/* Append expand/hidee class & attach onCLick listener and pass key of section to expand function*/}
              <div className={"title " + sections.thoughtArchives.class} onClick={this.expand.bind(this, sections.thoughtArchives.key)}>
                <img className="card-img-top" src="https://visualpharm.com/assets/224/Folder-595b40b85ba036ed117dd27b.svg" alt=" image"/>
              </div>
              <div className="text">
                <span>
                  <h2>Thought Archives</h2>
                </span>
              </div>
            </div>
          </div>

          <div className="col-sm-6 ">
            <a href="#"/>
            <div className="box-part text-center">
              <div className={"title " + sections.incomingRequests.class} onClick={this.expand.bind(this, sections.incomingRequests.key)}>
                <img className="card-img-top" src="https://visualpharm.com/assets/168/Read%20Message-595b40b75ba036ed117d88f5.svg" alt=" image"/>
              </div>
              <div className="text">
                <span>
                  <h2>Incoming Requests</h2>
                </span>
              </div>
            </div>
          </div>

          <div className="col-sm-6 ">
            <a href="#"/>
            <div className="box-part text-center">
              <div className={"title " + sections.createNew.class} onClick={this.expand.bind(this, sections.createNew.key)}>
                <img className="card-img-top" src="https://visualpharm.com/assets/375/Create-595b40b75ba036ed117d7bbf.svg" alt=" image"/>
              </div>
              <div className="text">
                <span>
                  <h2>Create New</h2>
                </span>
              </div>
            </div>
          </div>

          <div className="col-sm-6 ">
            <a href="#"/>
            <div className="box-part text-center">
              <div className={"title " + sections.yourCommunity.class} onClick={this.expand.bind(this, sections.yourCommunity.key)}>
                <img className="card-img-top" src="https://static.thenounproject.com/png/5040-200.png" alt=" image"/>
              </div>
              <div className="text">
                <span>
                  <h2>Your Community</h2>
                </span>
              </div>
            </div>
          </div>

        </div>
      </div>
    </div>)
  }
}

export default AdminPanel;
相关问题
最新问题