将类添加到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> 
    ) 
} 
}