我已经坚持了好几天了。我试图在用户单击每个 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/)
为什么会发生这种情况？我该如何解决这个问题？
最佳答案
您需要使用 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>
}
});
关于javascript - 使用重复的 div React.JS 切换事件的 CSS 状态，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/38713758/