鼠标悬停在地图循环reactjs中

Question

如何在Reactjs 中为自己在地图中设置悬停

hoverOn = () => {
this.setState({ hover: true});
}
hoverOff = () => { 
this.setState({ hover: false });    
}

...
var components = posts.map((post, i) => (
.....
<span className={this.state.hover ? 'showtooltip':'hidetooltip'} onHover={this.hoverOn} onMouseOut={this.hoverOff} onClick={(e) => this.viewPost(post, e)}><i className="quickview-button"></i></span> 
......
));

由于我使用setState，每次我将鼠标悬停在span上时，它都会反映从映射循环返回的所有列表数据。如何使用悬停来反映自身元素？

非常感谢

Answer 1

将此逻辑封装在一个小组件中：

class Foo extends React.Component {
constructor(){
this.state = { hover: false };
}
render(){
return <span 
{ ...this.props }
className={ this.state.hover ? 'showtooltip':'hidetooltip' } 
onHover={ () => this.setState({ hover: true }) } 
onMouseOut={ () => this.setState({ hover: false }) } 
/>;
}
}

并使用该组件：

...
var components = posts.map((post, i) => (
.....
<Foo onClick={(e) => this.viewPost(post, e)}><i className="quickview-button"></i></Foo> 
......
));

Answer 2

您可以将状态内的hover设置为对象state = { hover: {} }，并在事件(即this.setState({ hover: {...this.state.hover, i: true }});(上使用索引i对其进行设置。

然后将i参数传递给那些方法onHover={(i) => this.hoverOn(i)}并将className设置更改为<span className={this.state.hover[i] ? 'showtooltip':'hidetooltip'}(感谢@kenny注意到这一点(