reactJS

Question

にブートストラップカルーセルを使用してスライドの現在の数IがreactJSにブートストラップカルーセル（画像ギャラリー）を作成していますが、私は（それが現在のスライドの最後のインデックス値を示すの正確インデックス番号を示すに問題に直面しています。

例：第1〜第3のスライドから4番目のスライドが来たら、スライド番号は3（つまりインデックス2）になり、前のボタンをクリックすると、現在のスライド番号は3になりますが、myIndexの値は4になります3）の代わりに、または画像のインデックスはアクティブスライドの2）の代わりに3になります。与えられたサンプルで

var PhotoAlbum= React.createClass({ 
getInitialState: function(){ 
     return({ 
      myIndex : 1 
     }) 
    }, 


    componentWillReceiveProps: function() { 
     var currentIndex = $('div.active').index() + 1; 
     console.log(currentIndex) 

    this.setState({ myIndex: currentIndex }) 
}, 


    render: function(){ 

console.log(this.state.myIndex, "index number"); 
    return(
     <div> 

     <div className="modal-body pd_0"> 
     <h4 className="text-center"><b>{this.state.myIndex}/{Photos.length}</b></h4> 
     <div id="carousel-example-generic" className="carousel slide" data-ride="carousel"> 

<div className="carousel-inner" role="listbox" > 
    { 
     Photos.map(function(x,i){ 
      if(i==0){ 
       return(
       <div className="item active"> 
       <img src={x} className="img-responsive"/> 
       </div> 
       ) 

      }else{ 
       return(
       <div className="item"> 
       <img src={x} className="img-responsive"/> 
       </div> 
       ) 

      } 
     }) 
    } 
    </div> 

    <a className="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev"> 
    <span className="glyphicon glyphicon-chevron-left" aria-hidden="true"></span> 
    <span className="sr-only">Previous</span> 
    </a> 
    <a className="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next"> 
    <span className="glyphicon glyphicon-chevron-right" aria-hidden="true"></span> 
    <span className="sr-only">Next</span> 
    </a> 
</div> 
     </div> 


     </div> 
     ) 
    } 
}) 

私はcomponentDidMountで同じことをしようとしたが、this.setStateが関数ではありません。 正しいスライド番号を取得してブラウザで更新するには、ここをクリックしてください。 ありがとう

Answer 1

与えられたコードでは、あなたが望むようにあなたのモーダルを作成しました。与えられた試料を通過してください：

var PhotoAlbumModal= React.createClass({ 
    getInitialState: function(){ 
     return ({ 
      myPhotoAlbum: this.props.photoAlbum, 
      myIndex: 1 
     }) 
    }, 
    componentWillReceiveProps: function(newProps) { 
    this.setState({ myPhotoAlbum: newProps.photoAlbum }) 
    }, 

    componentDidMount: function() { 
     this.albumController(); 
    }, 

    albumController: function(){ 
       $('.carousel').carousel({ }) 
       .on('slid.bs.carousel', function() { 

        var curSlide = $('div.item.active'); 
        myIndexValue= curSlide.index()+1; 
        this.setState({ myIndex: myIndexValue }) 
       }.bind(this)); 

    }, 

    render: function(){ 

      var itemClass; 
      var myAlbum = Object.keys(this.state.myPhotoAlbum).map(function(x,i){ 
       var image=x 

       if(i == 0){ 
        itemClass="item active"; 
        } 
        else{ 
         itemClass="item"; 
        } 
       return(
        <div className={itemClass} key={i}> 
         <img src={image} className="img-responsive"/> 
        </div> 
       ) 

      },this) 


    return(
     <div> 
      <div className="modal-body pd_0"> 
       <h4 className="text-center photo_album_count">{this.state.myIndex}/ 
       {this.state.myPhotoAlbum.length}</h4> 

        <div id="carousel-example-generic" className="carousel slide" data-interval="false"> 
         <div className="carousel-inner center-album" role="listbox"> 
          {myAlbum} 
         </div> 

         {this.state.myPhotoAlbum.length>1 ? 
         <div> 
          <a className="left carousel-control control-album" href="#carousel-example-generic" 
         role="button" data-slide="prev" > 
          <div className="arrow-control"> 
           <span className="album-prev" aria-hidden="true"></span> 
           <span className="sr-only">Previous</span> 
          </div> 
          </a> 


          <a className="right carousel-control control-album" href="#carousel-example-generic" 
           role="button" data-slide="next" > 
           <div className="arrow-control"> 
           <span className="album-next" aria-hidden="true"></span> 
           <span className="sr-only">Next</span> 
           </div> 
          </a> 
         </div> 
         :null} 


        </div> 

      </div> 
     </div> 
     ) 
    } 
}); 

**与えられたコードの利点：**総画像は1になります場合は、あるだろう誰左右制御は行われません。

albumcontroller機能はdidmountで機能しています。