Question

我已经坚持好几天了。我试图在用户点击它时选择每个div（活动）并且能够取消选择（基本上具有切换状态）。我有一个JSON对象和div行的列表，当你将鼠标悬停在它上面时，它有一个紫色背景。

<script type="text/babel">
      var items = [
     {
        "topicName": "Kanye West",
        "imageURL":"https://d235mwrq2dn9n5.cloudfront.net/wp-content/uploads/2016/07/Kanye-West-2-11-16-1-616x440-111.jpg"
     },
     {
        "topicName": "Kanye West",
        "imageURL":"https://d235mwrq2dn9n5.cloudfront.net/wp-content/uploads/2016/07/Kanye-West-2-11-16-1-616x440-111.jpg"
     },
     {
        "topicName": "Kanye West",
        "imageURL":"https://d235mwrq2dn9n5.cloudfront.net/wp-content/uploads/2016/07/Kanye-West-2-11-16-1-616x440-111.jpg"
     },
     {
        "topicName": "Kanye West",
        "imageURL":"https://d235mwrq2dn9n5.cloudfront.net/wp-content/uploads/2016/07/Kanye-West-2-11-16-1-616x440-111.jpg"
     },
     {
        "topicName": "Kanye West",
        "imageURL":"https://d235mwrq2dn9n5.cloudfront.net/wp-content/uploads/2016/07/Kanye-West-2-11-16-1-616x440-111.jpg"
     },
     {
        "topicName": "Kanye West",
        "imageURL":"https://d235mwrq2dn9n5.cloudfront.net/wp-content/uploads/2016/07/Kanye-West-2-11-16-1-616x440-111.jpg"
     },
     {
        "topicName": "Kanye West",
        "imageURL":"https://d235mwrq2dn9n5.cloudfront.net/wp-content/uploads/2016/07/Kanye-West-2-11-16-1-616x440-111.jpg"
     },
     {
        "topicName": "Kanye West",
        "imageURL":"https://d235mwrq2dn9n5.cloudfront.net/wp-content/uploads/2016/07/Kanye-West-2-11-16-1-616x440-111.jpg"
     },
     {
        "topicName": "Kanye West",
        "imageURL":"https://d235mwrq2dn9n5.cloudfront.net/wp-content/uploads/2016/07/Kanye-West-2-11-16-1-616x440-111.jpg"
     }
  ];

    var RepeatModule = React.createClass({
     getDefaultProps: function() {
      return { items: [] }
     },
     render: function() {

      var listItems = this.props.items.map(function(item) {
       return ( 

       <div className="column one-quarter"> 
        <div className="topicContainer">  
          <h3>{item.topicName}</h3>,
            <img src={item.imageURL}/>
        </div>
      </div>

       );
      });
      return (
        <div>
          {listItems}      
        </div>
      );
     }
    });
    ReactDOM.render(<RepeatModule items={items} />,     
     document.getElementById('topics'));
  </script>
  </head>
  <body>
  <div class="container">
    <div class="centerInterests row">
      <p class="select">Select 3 or more activities to personalize your feed</p>
      <input class="interestBox pad-75-left" type="text" placeholder="Search for activities">
      <p class="topicText">Popular Activities</p>
      <div class="row">
        <div id="topics"></div> 
      </div>
    </div>
  </div>

  <script src="/javascripts/start.js" type="text/javascript"></script> 
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
  <script type="text/javascript">
    // $('.topicContainer').on('click', function (e) {
    //     $('.topicContainer').toggleClass("purpleOverlay");
    // });

    // $('div.topicContainer').click(function(){
    //    $('.topicContainer').toggleClass("purpleOverlay");
    //    console.log("here I go");
    // });
  </script>
  </body>

CSS代码：

.topicImage {
    padding-bottom: 75%;
    background-position: 50% 50%;
    background-repeat: no-repeat;
    background-size: cover;
    margin: 0 auto;
    position: relative !important;
    height:150px;
    background-color: rgba(0, 0, 0, 0.8) !important;

}

.text-inside-image {
  position: absolute;
  top: 20%;
  left: 35%;
  color: white;
  font-size: 24px;
  font-weight: 500;
  z-index: 1;
}

.topicContainer {
    position: relative;
    background-color: #171616;
    overflow: hidden;
    height: 150px;
}
.topicContainer h3 {
    text-align: center;
    z-index: 2;
    position: relative;
    color: #fff;
    padding: 50px;
} 
.topicContainer img {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: auto;
    z-index: 1;
    opacity: 0.6;
}

.topicContainer:hover {
  background-color: #5450DC;
}

.topicContainer.active {
  background-color: #5450DC;
}

.purpleOverlay {
  background-color: #5450DC;
}

我已经尝试过从JQuery实现到切换活动CSS状态到在React.js中实现handleclick的所有内容（即https://jsfiddle.net/uwadhwnr/）

为什么会这样？我该如何解决这个问题？

Answer 1

您需要使用states来处理活动元素

var RepeatModule = React.createClass({
  getDefaultProps: function () {
    return { items: [] }
  },

  getInitialState: function () {
    return { items: [] }
  },

  componentDidMount: function () {
    const items = this.props.items.map((item) => {
      return Object.assign(item, { isActive: false });
    });

    this.setState({ items });
  },

  handleClick: function (e, index) {
    const items = this.state.items
      .map((item, i) => {
        if (index === i) {
          return Object.assign(item, { isActive: !item.isActive });
        } 

        return item;
      });

    this.setState({ items });
  },

  render: function() {
    const items = this.state.items.map((item, index) => {
      return <div className="column one-quarter" key={ index }>
        <div
          className={`topicContainer ${ item.isActive ? 'purpleOverlay' : '' }`}
          onClick={ (e) => this.handleClick(e, index) }
        >
          <h3>{ item.topicName }</h3>, <img src={ item.imageURL } />
        </div>
      </div>
    });

    return <div>{ items }</div>
  }
});

Example

使用重复div来切换活动的CSS状态React.JS

1 个答案: