如何在反应弹性旋转木马的第一个指标处触发函数？

Question

我在这里有一个特别的要求，那就是放弃我。我使用的是反应滑块-旋转木马，当它第一次加载时，它从左边填充了大约45便士。然后，在下一个箭头单击，它删除填充(这是完成和容易)。但是，在达到第一个索引之前，不应该添加填充-左。换句话说，直到没有更多的项要导航回。一旦它击中最左边的项目(索引-0)，然后它添加填充-左后，使它看起来像它最初加载的方式。

下面是我现在拥有的一个示例功能。除了我解释过的第一个索引事件之外，所有这些都能工作。

import React, { useState, useEffect } from "react";
import ReactDOM from "react-dom";
import Carousel, { consts } from "react-elastic-carousel";
import Item from "./Item";
import "./styles.css";

const breakPoints = [
  { width: 1, itemsToShow: 1 },
  { width: 550, itemsToShow: 2, itemsToScroll: 2 },
  { width: 768, itemsToShow: 3 },
  { width: 1200, itemsToShow: 4 }
];

const items = [1, 2, 3, 4, 5, 6, 7, 8];

function App() {
  const [first, setFirst] = useState(true);

  useEffect(() => {
    setFirst(true);
  }, []);

  const addPadding = () => {
    setFirst(true);
  };
  const removePadding = () => {
    setFirst(false);
  };

  const renderArrows = ({ type, onClick, isEdge }) => {
    const pointer =
      type === consts.PREV ? (
        <div
          style={{
            top: 5,
            left: 0,
            display: "flex",
            height: "100%",
            width: "100%",
            alignItems: "center",
            justifyContent: "center"
          }}
          onClick={addPadding}
        >
          <span role="img" aria-label="">
            
          </span>
        </div>
      ) : (
        <div
          style={{
            top: 5,
            right: 0,
            display: "flex",
            height: "100%",
            width: "100%",
            alignItems: "center",
            justifyContent: "center"
          }}
          onClick={removePadding}
        >
          <span role="img" aria-label="">
            
          </span>
        </div>
      );

    return (
      <button
        onClick={onClick}
        disabled={isEdge}
        style={{
          zIndex: 1010,
          width: 55,
          fill: "black",
          cursor: "pointer",
          display: "flex",
          alignItems: "center",
          justifyContent: "center",
          transition: "all .8s ease-in-out !default"
        }}
      >
        {pointer}
      </button>
    );
  };

  return (
    <div className="App">
      <div className="controls-wrapper">
        <button onClick={removePadding}>Remove Padding</button>
        <button onClick={addPadding}>Add Padding</button>
      </div>
      <hr className="seperator" />
      <div className="carousel-wrapper" style={{ backgroundColor: "maroon" }}>
        <div
          style={{
            paddingLeft: first ? 45 : 15,
            paddingTop: 15,
            paddingBottom: 15,
            paddingRight: 15
          }}
        >
          <Carousel
            breakPoints={breakPoints}
            renderArrow={renderArrows}
            style={{ backgroundColor: "white" }}
          >
            {items.map((item) => (
              <Item key={item}>{item}</Item>
            ))}
          </Carousel>
        </div>
      </div>
    </div>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

如果你需要玩这里有一个方便实用的代码沙盒的话。谢谢各位

Answer 1

您可以尝试利用反应弹性旋转道具，例如onNextStart和onPrevStart，它们可以提供给以前或将来的项目，在此基础上您可以删除/添加填充。

解决方案：

1. 为prev/next箭头click元素删除line:39和line:56上的div赋值
2. 添加onNextStart和onPrevStart回调作为<Carousel>上的支持
3. 在每个onNextStart和onPrevStart回调中包含一些逻辑，以检查未来项目的index，以便驱动填充逻辑(添加/删除填充)。

Codesandbox示例