在react中使用onMouseEnter应用永久类
在react中使用onMouseEnter应用永久类
提问于 2017-03-13 13:50:48
如何申请留下来的类？我必须使用else语句将类设置为null back。如果我不提供else语句，我会得到一个错误。
https://fiddle.jshell.net/8wsr7xa1
class App extends React.Component {
constructor(props){
super(props)
this.state = {
active: null
}
}
onMouseEnter(item){
this.setState({active: item})
}
render(){
const items = [1,2,3,4,5];
return (
<div>
{items.map((obj,i) =>
<div
key={i}
style={this.state.active === obj ?
{backgroundColor: 'yellow'} : {}}
onClick={this.onMouseEnter.bind(this, obj)}>
{obj}
</div>
)}
</div>
);
}
}回答 1
Stack Overflow用户
发布于 2017-03-14 10:18:57
很难理解你的问题，但我假设这就是你想要做的？
class App extends React.Component {
constructor(props){
super(props)
this.state = {
actives: []
}
}
onMouseEnter(item){
let actives = [].concat(this.state.actives);
if (actives.indexOf(item) === -1) { actives.push(item) }
this.setState({actives});
}
render(){
const items = [1,2,3,4,5];
return (
<div>
{items.map((obj,i) =>
<div
key={i}
style={this.state.actives.indexOf(obj) > -1 ?
{backgroundColor: 'yellow'} : {}}
onMouseEnter={this.onMouseEnter.bind(this, obj)}>
{obj}
</div>
)}
</div>
);
}
}
React.render(
<App name="World"/ >,
document.getElementById('app')
);页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/42757325
复制相关文章
相似问题
腾讯云开发者
