React - Wie relative div angezeigt wird, wenn die Maus auf einem HTML-Tag schwebt?

Question

Unten ist mein Code ...

<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> 

Ich habe ein Array-Objekt Bücher und ich erstelle für jedes Buch ein fa-Flag-Symbol. Was ich will, ist, verschiedene Memo-Dialog anzuzeigen, wenn die Maus auf jedem Flaggensymbol schweben.

Ich weiß, wie es mit der Abfrage zu tun, aber wie kann ich das in reactive Weise nicht mit jquery tun?

Answer 1

Ich bin nicht sicher, was Sie versuchen zu erreichen, aber dieses Beispiel könnte für Sie

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')); 

Auch fiddle Beispiel nützlich sein.

Ich hoffe, es wird Ihnen helfen. Danke

Answer 2

Ich empfehle Ihnen, isHovered State Variable zu verwenden, um hover State zu speichern.

Wir zeigen eine Komponente an (in Ihrem Fall wäre es ein Dialogfeld), wenn isHoveredtrue ist und es ausblenden, wenn diese Variable false ist.

Wenn wir auf Link Element schweben, werden wir handleEnter Funktion auslösen, um isHovered Variable auf true zu setzen.

Wenn wir den Cursor aus dem Link-Element heraus bewegen, lösen wir die handleLeave-Funktion aus, um die Variable isHovered auf false zu setzen.

Beispiel:

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> 
    ); 
    } 
} 

Auch können Sie demo bei CodePen sehen.