javascript - 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 的情况下以 react 方式做到这一点？

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例子。

希望对您有所帮助。谢谢