關(guān)于react事件改變狀態(tài)的一些問題

目前在寫一個(gè)如下圖效果的組件：
小白現(xiàn)在遇到兩個(gè)問題：
當(dāng)鼠標(biāo)hover其中的一個(gè)列表時(shí)，彈出一條展示完整列表標(biāo)題信息的tip，每一個(gè)列表都有一個(gè)對(duì)應(yīng)的，那當(dāng)我hover時(shí)怎么判定只顯示當(dāng)前列表的tip。
下面是我的部分代碼：

  {
         this.props.list.map((item, index) => {
              return (
                 <li key={index} className="list" onMouseEnter={this.onMouseEnter.bind(this)} onMouseLeave={this.onMouseLeave.bind(this)}><a href={item.link} target="_blank">{item.listText}</a>
                     <div className="detail" style={{ display: this.state.open ? 'block' : 'none' }}>{item.listText}</div>
                 </li>
              );
         })
   }
                          

][2]