React-鼠标悬停在html标签上时如何显示相对div？

Question

下面是我的代码...

<ul className="no-style board__list">
   {Object.keys(today.books).map(function(id) {
       var refBook = today.books[id][0];                                            
          return (
            <li key={refBook._id} className="board__list-item">
                <div className="container flexrow">
                      <div className="flexrow__fit-2">{refBook.book_no}</div>
                      <div className="flexrow__org">
                         <span className="board__icon-wrap">
                           {refBook.memo
                               ? (<i className="fa fa-flag" style={{color:"#F9AB9F"}}></i>)
                               : null
                           }
                        </span>
                           {refBooking.memo
                               ? (<div  className="memo_dialog">{refBook.memo}</div>)
                               : null
                           }
                     </div>
                </div>
           </li>
        );
    })}
</ul>

我有一个对象簿数组，并为每本书创建一个fa-flag图标。 我想要的是当鼠标悬停在每个标志图标上时显示不同的备忘录对话框。

我知道如何使用查询来做到这一点，但是如何以不使用jquery的反应方式做到这一点呢？

Answer 1

我不确定您要达到什么目标，但此示例可能对您有用

class Book extends React.Component {
  constructor(props){
    super(props);
    this.handleOver = this.handleOver.bind(this);
  }
  handleOver(name){
    this.props.over(this.props.name)
  }
  render(){
    return <div onMouseOver={this.handleOver}>{this.props.name}</div>
  }
}

class BookList extends React.Component {
  constructor(props){
    super(props);
    this.mouseOver = this.mouseOver.bind(this);
    this.state = {
        books: ['hello', 'amazing', 'world'],
      memo: ''
    }
  }
  mouseOver(name){
    this.setState({memo: name})
  }
  render(){
    const bookList = this.state.books.map((book, index)=>{
        return <Book key={index} name={book} over={this.mouseOver}/>
    });
    return <div>
        {bookList}
      <hr/>
      <div>{this.state.memo}</div>
    </div>
  }
}

React.render(<BookList />, document.getElementById('container'));

也是fiddle例子。

希望对您有帮助。 谢谢

Answer 2

我建议您使用isHovered状态变量来存储hover状态。

如果isHovered为true ，我们将显示某些组件（在您的情况下为对话框），如果此变量为false ，则将isHovered隐藏。

当我们将鼠标悬停在链接元素上时，我们将触发handleEnter函数将isHovered变量设置为true 。

类似地，当我们将光标移出链接元素时，我们将触发handleLeave函数将isHovered变量设置为false 。

例：

class Test extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      isHovered: false,
    };
  }

  handleEnter() {
    this.setState({
      isHovered: true 
    });
  }

  handleLeave() {
    this.setState({
      isHovered: false 
    });
  }

  render() {
    return (
      <div>
        <a
          onMouseEnter={this.handleEnter.bind(this)}
          onMouseLeave={this.handleLeave.bind(this)}
        >Link</a>
        {this.state.isHovered ? (
          <div className="box">A component</div>
        ) : (
          <div />
        )}
      </div>
    );
  }
}

另外，您可以在CodePen上查看演示 。