Question

我正在做一个反应项目。我有一个页面，必须使用多个react-slick元素。我想维护每个光滑元素的索引。目前我在做这个

render() {
            var settings = {
            arrows: true,
            infinite: false,
            speed: 500,
            slidesToShow: 1,
            slidesToScroll: 1,
            afterChange: function(currentSlide){
            this.setState({
            currentSlide: currentSlide
        })
            console.log(currentSlide);
        }.bind(this)
        };
            return (

            <div className="main-wrapper">

            {/*carousel responsive1*/}

            {this.state.users.map((item,i)=>{
                return  <div className="main-wrapper-mobile">
                    <div className="carousel responsive1">
                        <div className="mask">
                            {/*slideset */}
                            <div className="slideset">
                                {/*slide*/}

                                <Slider {...settings}>
                                    {item.activities.map((item1,i)=>{
                                        return <div className="slide">
                                            <div className="content__item d-flex">

                                                <div className="content__photo">
                                                    <img className="content__img" src={item.image_url}/>
                                                </div>
                                                <div className="article">
                                                    <p className="article__text">{item.comment_text}</p>
                                                    <ul className="article__controls">
                                                        <li className="article__control-item"><a href="#">visual <i
                                                            className="fa fa-eye" aria-hidden="true"></i></a></li>
                                                        <li className="article__control-item"><a href="#">text <i
                                                            className="fas fa-comment-dots"></i></a></li>
                                                        <li className="article__control-item"><a href="#">edited <i
                                                            className="fas fa-edit"></i></a></li>
                                                    </ul>
                                                    <div className="article__icon">
                                                        <a href="#" className="article__icon--blue"> <i
                                                            className="fa fa-check-circle" aria-hidden="true"></i></a>
                                                        <a href="#" className="article__icon--gray"><i
                                                            className="fa fa-minus-circle" aria-hidden="true"></i></a>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    })}

                                </Slider>
                            </div>
                        </div>

上述代码的简要解释：

我有一组用户。为每个用户分配一个滑块。这就是我在每个映射中映射用户数组和渲染的原因。

目前＆＃34; currentSlide＆＃34;参数＆＃34;设置＆＃34;设置状态＆＃34; currentSlide＆＃34;无论当前的滑坡是什么。问题是所有滑块的状态更改都相同。没有办法跟踪哪个滑块正在滑动。我应该能够改变或维护滑块及其相应的索引。我该怎么办？

Answer 1

您必须为每个react-slick实例动态创建一个新的设置对象，并在回调内附加一个额外的值（在这种情况下，我只是添加了一个名为“ Slider1”或“ Slider2”等的额外字符串）。 afterChange的功能。基本上，只要用户在特定的react滑块上更改的幻灯片，state下的currentSlide就会有一个看起来像{indexSlider: "Slider1", indexOfCurrentSlide: 2 }的对象。让我知道这是否澄清您的要求。我认为这是区分已更改滑块的一种方法。

const MultipleSliders = () => {
  const [ currentSlide, setCurrentSlide ] = useState({})
  const generateSettings = (indexSlider) => {
    return {
      arrows: true,
      infinite: false,
      speed: 500,
      slidesToShow: 1,
      slidesToScroll: 1,
      afterChange: (indexOfCurrentSlide) => {
        setCurrentSlide({
          indexSlider,
          indexOfCurrentSlide
        })
      }
    }
  }
  const settings1 = generateSettings('Slider1');
  const settings2 = generateSettings('Slider2');
  const settings3 = generateSettings('Slider3');
  return (
    <React.Fragment>
      <Slider {...settings1}>
        {/* content goes here */}
      </Slider>
      <Slider {...settings2}>
        {/* content goes here */}
      </Slider>
      <Slider {...settings3}>
        {/* content goes here */}
      </Slider>
    </React.Fragment>
  )
}

维持多个反应光滑的索引

1 个答案: