反应水平按钮滚动答案

【问题标题】：React horizontall button scroll反应水平按钮滚动
【发布时间】：2021-02-25 03:16:18
【问题描述】：

我正在尝试创建一个带有按钮的水平滑块，但我遇到了导航问题。当我单击右然后左时，块向右移动 1。

我尝试了 useEffect 但刷新页面后效果将整个页面移动到滑块

我的代码：

const item = useRef({})
// use state
const lastIndex = slides.length;
// const lastIndex = slider_info.slice(-1);
const [i, setCount] = useState(0);

const scrollToNextSlide = () => {
        item.current[i].scrollIntoView({
            behavior: "smooth",
            block: "nearest",
            inline: "center"
        })
    }
function scroll(direction) {
        if (direction === "left"){
            setCount(i - 1);
        }else{
            setCount(i + 1);
        }
        scrollToNextSlide();
    }

然后返回

<div className="slider">
                {slides.map((data, i) => (
                        <article className="art_class"
                                 key={i}
                                 ref={(ref) => (item.current[i] = ref)}>
                            <img className="art_img"
                                 src={data.img}/>
                            <header className="art_title">{data.title}</header>
                            <p>{data.subtitle}</p>
                        </article>
                    )
                )}
                <button>
                    <FontAwesomeIcon
                        icon={faArrowLeft}
                        className="arrow left"
                        onClick={() => scroll("left") }>
                    </FontAwesomeIcon>
                </button>
                <button>
                    <FontAwesomeIcon
                        icon={faArrowRight}
                        className="arrow right"
                        onClick={() => scroll("right") }>
                    </FontAwesomeIcon>
                </button>
            </div>

【问题讨论】：

标签： javascript arrays reactjs horizontal-scrolling

【解决方案1】：

我解决了我的问题，将变量 let (something) 分配给 const i 就足够了并在函数 handleNavLeft 和 handleNavRight

的任何地方替换它

【讨论】：