用重複的div切換活動的CSS狀態React.JS

我一直堅持了幾天。我試圖保持每個div（活動），當用戶點擊它並能夠被取消選擇（本質上具有切換狀態）時選擇。我有一個JSON對象和div行的列表，當你將鼠標懸停在它上面時有紫色背景。用重複的div切換活動的CSS狀態React.JS

<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/）

這是怎麼發生的？我怎麼解決這個問題？

來源

2016-08-02 Rohit Tigga

你需要爲了處理有源元件使用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

來源

2016-08-02 07:34:09

用重複的div切換活動的CSS狀態React.JS

回答

相關問題