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

【问题标题】：React - How to show relative div when mouse hover on a html tag?React - 当鼠标悬停在 html 标签上时如何显示相对 div？
【发布时间】：2016-08-08 16:54:54
【问题描述】：

下面是我的代码...

<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 以反应方式做到这一点？

【问题讨论】：

标签： javascript html css reactjs

【解决方案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 示例。

希望对你有所帮助。谢谢

【讨论】：

【解决方案2】：

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

如果isHovered 是true，我们正在显示一些组件（在您的情况下是对话框），并在此变量为false 时隐藏它。

当我们将鼠标悬停在链接元素上时，我们将触发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 看到demo。

【讨论】：