將類添加到React onClick中的特定元素

Question

我使用react-slick輪播與自定義控件。我只想添加'活動'類到更改幻燈片的元素（通過onClick事件）。但在我的情況下，「積極」的班級切換所有人。

export default class ServicesSlider extends React.Component { 
    constructor(props) { 
     super(props) 
     this.changeSlide = this.changeSlide.bind(this) 
     this.state = { 
      isActive: false 
     } 
    } 
    changeSlide(e) { 
     this.setState({ 
      isActive: !this.state.isActive 
     }); 
     this.slider.slickGoTo(e); 
    } 
    render() { 
     return (
      <div> 
       <section className="carousel-controls"> 
        <div 
         onClick={() => this.changeSlide(0)} 
         className={this.state.isActive 
         ? 'column' : 'column active'}>Slide one 
        </div> 
        <div 
         onClick={() => this.changeSlide(1)} 
         className={this.state.isActive 
         ? 'column' : 'column active'}>Slide two 
        </div> 
        <div 
         onClick={() => this.changeSlide(2)} 
         className={this.state.isActive 
         ? 'column' : 'column active'}>Slide three 
        </div> 
        <div 
         onClick={() => this.changeSlide(3)} 
         className={this.state.isActive 
         ? 'column' : 'column active'}>Slide four 
        </div> 
       </section> 
       <Slider ref={c => this.slider = c}> 
        <div className="sliderItem">Slide 1</div> 
        <div className="sliderItem">Slide 2</div> 
        <div className="sliderItem">Slide 3</div> 
        <div className="sliderItem">Slide 4</div> 
       </Slider> 
      </div> 
     ) 
    } 
} 

如何正確追加類到React中的特定元素？

Answer 1

關鍵是不跟蹤布爾值active，而是跟蹤活動索引。也就是說，哪張幻燈片是有效的：0, 1, 2, 3, or 4, ...。你需要修改你的狀態來達到目的。

我還主張將參數從e更改爲更具描述性的內容，因爲e通常用於事件。

如果你改變你的狀態

this.state = { 
    activeIndex: 0 
} 

那麼你可以更新活動的值，例如：

changeSlide(index) { 
    this.setState({ 
     activeIndex: index 
    }); 
    this.slider.slickGoTo(index); 
} 

，然後再檢查活躍在渲染：

<div 
    onClick={() => this.changeSlide(0)} 
    className={this.state.activeIndex !== 0 ? 'column' : 'column active'}> 
    Slide one 
</div> 

Answer 2

你的方法應該是：

this.setState({ 
    activeSlide: e 
}); 

然後使用：

className={this.state.activeSlide === {x} ? 'column' : 'column active'} 

Answer 3

而不是具有isActive變量，這表明只有一個真/假值，爲什麼不能有一個currentActiveSlide變量？

在構造函數中，您將其初始化爲null（如果您希望您的應用程序以無活動幻燈片開始）。然後在點擊它時用索引更新它。

所以你changeSlide()函數變爲：

changeSlide(idx) { 
    // If we click on the already active slide, set "currentActiveSlide" to null. 
    // Otherwise, set it to the "idx". 
    this.setState({ 
    currentActiveSlide: idx !== this.state.currentActiveSlide ? idx : null 
    }); 
    this.slider.slickGoTo(idx); 
} 

我改變了你的e參數idx的清晰度。因爲前者提出了一個事件。當然，你也需要更新你的渲染：

className={this.state.currentActiveSlide === 1 ? 'column' : 'column active'} 

（雖然我認爲你在這裏得到了邏輯逆轉）。

Answer 4

你在所有幻燈片中不能具有相同的狀態名稱。我建議創建一個數組作爲this.state.isActive，並讓每個幻燈片成爲該數組的不同索引。那麼你只需要改變數組索引的onClick

export default class ServicesSlider extends React.Component { 
constructor(props) { 
    super(props) 
    this.changeSlide = this 
     .changeSlide 
     .bind(this) 
    this.state = { 
     isActive: Array(4).fill(false); //new stuff 
    } 
} 
changeSlide(e) { 
    const newBool = !this.state.isActive[e]; //new stuff 
    var newArray = this.state.isActive;//new stuff 
    newArray[e] = (newBool);//new stuff 
    this.setState({ 
     isActive: newArray//new stuff 
    }); 
    this 
     .slider 
     .slickGoTo(e); 
} 
render() { 
    return (
     <div> 
      <section className="carousel-controls"> 
       <div 
        onClick={() => this.changeSlide(0)} 
        className={this.state.isActive[0]//new stuff 
        ? 'column' 
        : 'column active'}>Slide one 
       </div> 
       <div 
        onClick={() => this.changeSlide(1)} 
        className={this.state.isActive[1]//new stuff 
        ? 'column' 
        : 'column active'}>Slide two 
       </div> 
       <div 
        onClick={() => this.changeSlide(2)} 
        className={this.state.isActive[2]//new stuff 
        ? 'column' 
        : 'column active'}>Slide three 
       </div> 
       <div 
        onClick={() => this.changeSlide(3)} 
        className={this.state.isActive[3]//new stuff 
        ? 'column' 
        : 'column active'}>Slide four 
       </div> 
      </section> 
      <Slider ref={c => this.slider = c}> 
       <div className="sliderItem">Slide 1</div> 
       <div className="sliderItem">Slide 2</div> 
       <div className="sliderItem">Slide 3</div> 
       <div className="sliderItem">Slide 4</div> 
      </Slider> 
     </div> 
    ) 
} 
}