Nuka-carousel 反应移动到某些幻灯片答案

【问题标题】：Nuka-carousel react move to certain slideNuka-carousel 反应移动到某些幻灯片
【发布时间】：2019-06-08 06:54:56
【问题描述】：

我有一个关于 npm package 'nuka-carousel.如何在单击的元素上执行 goToSlide。我有带有 scroll3d 设置的元素列表。如果我单击例如最后一个可见元素，我想滚动轮播，以便该元素位于中心。

【问题讨论】：

标签： javascript reactjs components carousel

【解决方案1】：

根据他们的GitHub documentation，您只需将onClick添加到您的控制按钮，然后使用setState()更改slideIndex即可控制轮播：

import React from 'react';
import Carousel from 'nuka-carousel';

export default class extends React.Component {
  state = {
    slideIndex: 0
  };

  render() {
    return (
      <Carousel
        slideIndex={this.state.slideIndex}
        afterSlide={slideIndex => this.setState({ slideIndex })}
      >
      ...
      </Carousel>
      <button onClick={(event) => this.handlesClick(event, index)}> />
    );
  }

  handleClick = (event, index) => {
    event.preventDefault();
    this.setState({slideIndex: index});
  }
}

【讨论】：

谢谢，但由于 mixins 已被弃用，所以您有什么信息可以在最新的 React 版本中使用它吗？
你是对的，如果你使用的是 es6，有更好的方法来控制轮播。我会用这个新代码更新我的答案！