Question

我正在尝试根据此反应carousel library

构建自定义模式

基本上，我处于模态正确实施的地步，但是我似乎找不到如何将模态上的featured image连接到相同就像目前也出现在轮播中的那个。

const Modal = ({ modal, items, handleModalFalse, currentIndex, featured }) => {
  return (
    <div className={modal ? "modal" : "hide"} onClick={handleModalFalse}>
      {/* this only features the first image */}
      {/* <img src={featured} /> */}
      {/* shows every image on modal*/}
      {items.map((item, i) => (
        <div key={i} className="wrapper">
          <img src={item} />
        </div>
      ))}
    </div>
  );
};

这些都是为轮播提供动力的处理程序。我正在努力正确地连接特色图片（也许在componentDidMount()内？）

class Gallery2 extends React.Component {
  state = {
    currentIndex: 0,
    items: [
      "https://homepages.cae.wisc.edu/~ece533/images/airplane.png",
      "https://homepages.cae.wisc.edu/~ece533/images/baboon.png",
      "https://homepages.cae.wisc.edu/~ece533/images/cat.png",
      "https://homepages.cae.wisc.edu/~ece533/images/boat.png"
    ],
    modal: false,
    featured: undefined
  };

  // what should go here instead??
  componentDidMount() {
    this.setState({ featured: this.state.items[0] });
  }

  slideTo = i => console.log("clicked") || this.setState({ currentIndex: i });

  onSlideChanged = e => this.setState({ currentIndex: e.item });

  slideNext = () =>
    this.setState({ currentIndex: this.state.currentIndex + 1 });

  slidePrev = () =>
    this.setState({ currentIndex: this.state.currentIndex - 1 });

  handleEnlargeClick = () => {
    this.setState({ modal: true });
  };

  handleModalFalse = () => {
    this.setState({ modal: false });
  };

render() {
    return (
      <>
        <h3>React Alice Carousel</h3>
        {/* MODAL */}
        <Modal
          modal={this.state.modal}
          items={this.state.items}
          handleModalFalse={this.handleModalFalse}
          currentIndex={this.state.currentIndex}
          featured={this.state.featured}
        />
        <RenderGallery
          items={this.state.items}
          responsive={this.responsive}
          onSlideChanged={this.onSlideChanged}
          currentIndex={this.state.currentIndex}
        />
        <button onClick={() => this.handleEnlargeClick()}>
          click to enlarge
        </button>
        <RenderThumbs
          items={this.state.items}
          slideNext={this.slideNext}
          slidePrev={this.slidePrev}
          slideTo={this.slideTo}
          responsive={this.responsive}
        />
      </>
    );
  }
}
*******

您可以在此code sandbox上查看完整的Carousel实施和bug的实际操作。请随意分叉。

现在我的模态只显示第一个图像或全部图像...

我了解为什么我目前只能获得第一张或全部图像，我只是无法找到解决问题的方法。

如何使Modal上的特色图片与当前在轮播上的图片相同？

Answer 1

您的代码中的问题是您的模态遍历了所有项，并在您单击“放大”按钮时显示了它们。要解决此问题，只需将selectedIndex变量与items一起使用，即可获取当前选择的item。

沙盒示例：https://codesandbox.io/s/21p19wmpyy

模式代码：

const Modal = ({ modal, items, handleModalFalse, currentIndex, featured }) => {
  return (
    <div className={modal ? "modal" : "hide"} onClick={handleModalFalse}>
      {/* this only features the first image */}
      {/* <img src={featured} /> */}
      {/* shows every image on modal*/}
      <div className="wrapper">
        <img src={items[currentIndex]} />
      </div>
    </div>
  );
};

反应图像轮播|特色图片模态

1 个答案: