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上时，它都会反映从map循环返回的所有列表数据。如何使用鼠标悬停反映自己的元素？

非常感谢

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: {} }，并在发生事件即i时将其设置为索引this.setState({ hover: {...this.state.hover, i: true }});。

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

地图循环reactjs中的鼠标悬停

2 个答案: