Question

我使用带有自定义控件的react-slick轮播。我想将'active'类仅添加到更改幻灯片的元素（通过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

为什么没有isActive变量，而不是只有一个currentActiveSlide变量，而不是{/ 1}}变量？

在构造函数中，您将其作为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 2

关键是不要跟踪布尔值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 3

你的方法应该是：

this.setState({
    activeSlide: e
});

然后使用：

className={this.state.activeSlide === {x} ? '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>
    )
}
}

在React onClick中将类添加到特定元素

4 个答案: