React-轮播

Question

我正在创建自己的轮播，我想在滑块底部添加圆圈导航。我正在从mongoDb（3张图片）中获取数据，并将其加载到App组件中，然后通过props传递到Carousel组件。

我想映射槽数组并将索引设置为data-slider属性，然后再使用e.target.dataset.slider读取此信息，并将方法changeSlider（）更改为data-slider属性中的该值。

我有一个奇怪的问题，当我单击此按钮的圆圈时，有时我的值=== 2、0、1，但有时我变得不确定，并且我的滑块不知道哪个滑块处于活动状态。

<div className="circle-container">
          {this.props.images.map((el, index) => {
            return (
              <button
                key={index}
                onClick={this.setActiveSlide}
                className="circle-empty"
                data-slider={index}
              >
                <i className="far fa-circle" />
              </button>
            );
          })}
        </div>

方法：

setActiveSlide = e => {
    let slider = e.target.dataset.slider;
    this.setState({
      slider: slider
    });
  };

调用setActiveSlide方法onClick给了我这个结果：

Answer 1

您的事件可能是从图标触发的，有时只需将事件target更改为currentTarget

setActiveSlide = e => {
  // I've changed this variable to const because our data-slider is not
  // going to change.
  const slider = e.currentTarget.dataset.slider;
  // Using es6 object property shorthand if we have both
  // the same variable name and field we can simply pass in just the
  // field name and it will auto convert it for us
  this.setState({
    slider
  });
};