React Onmouseover提案

Question

私はリアクションとブートストラップCSSを使用してビルドウェブサイトを学習しています。 カルーセルと分離されたナビゲーションがあります。私はonmousehover使用して私のリストのためのイベントを作成しようとしたが、失敗したんだ

class Home extends React.Component { 
    mousehover() { 
     ... ???? ..... 
    }; 
    render() { return (
     <div className="row"> 
      <div id="carouselExampleIndicators" className="carousel slide col-9" data-ride="carousel"> 
       <div className="carousel-inner" role="listbox"> 
        <div className="carousel-item active"> 
         <img className="d-block img-fluid" src="http://northdelawhere.happeningmag.com/wp-content/uploads/banner_sample300x300.jpg" 
          alt="First slide" /> 
        </div> 
        <div className="carousel-item"> 
         <img className="d-block img-fluid" src="http://www.raymiller.cc/thumbnail/exterior-beadboard-paneling-4-texture-plus-indoor-outdoor-siding-panel-beadboard-oak-sample-300-x-300.jpg" 
          alt="Second slide" /> 
        </div> 
        <div className="carousel-item"> 
         <img className="d-block img-fluid" src="..." alt="Third slide" /> 
        </div> 
       </div> 
       <a className="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev"> 
        <span className="carousel-control-prev-icon" aria-hidden="true"></span> 
        <span className="sr-only">Previous</span> 
       </a> 
       <a className="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next"> 
        <span className="carousel-control-next-icon" aria-hidden="true"></span> 
        <span className="sr-only">Next</span> 
       </a> 
      </div> 
      <div className="col-3"> 
       <ul className="flex-column"> 
        <li data-target="#carouselExampleIndicators" data-slide-to="0" onmouseover={this.mousehover}>one</li> 
        <li data-target="#carouselExampleIndicators" data-slide-to="1">two</li> 
        <li data-target="#carouselExampleIndicators" data-slide-to="2">three</li> 
       </ul> 
      </div> 
     </div> 
    )} 
} 
React.render(<Home />, document.getElementById('root')); 

私のカルーセルのコード例以下 。 ターゲットカルーセル（data-slide-to）にスライドするonmousehoverイベントの手がかり/例を教えてください。

ありがとうございます。

Answer 1

リアクトドキュメントのSyntheticEvent sectionを見てください、それはでonMouseEnterとonMouseLeaveのようなイベントを使用する方法について説明し反応：

あなたのイベントハンドラは、 クロスブラウザのラッパーをSyntheticEventのインスタンスが渡されますブラウザのネイティブイベントを中心に stopPropagation()とpreventDefault()を含む のブラウザのネイティブイベントと同じインターフェイスですが、イベントはすべてのブラウザで同じように動作します（ ）。あなたのユースケースに応じて、あなたはCSSの:hover擬似クラスを使用してホバー効果を実装したほうが良い、と述べた

---

。