更新滾動反應鈎子的狀態

Question

我希望能夠在用戶滾動時更新我的​​狀態。

這是我所擁有的近似值：

import React, { useState, useEffect } from "react";
import "./styles.css";

export default function App() {
  const [scrollNumber, updateScrollNumber] = useState(0);
  const onScroll = () => updateScrollNumber(scrollNumber + 12);

  useEffect(() => {
    document.addEventListener('scroll', (event) => onScroll())
  },[])
  return (
    <div onScroll={onScroll} className="App" style={{ height: 200000 }}>
      {console.log({ scrollNumber })}
      <h1>Hello CodeSandbox</h1>
      <h2>Start editing to see some magic happen!</h2>
    </div>
  );
}

為什么scrollNumber不更新？

這是一個沙箱。

Answer 1

第一個問題是您將 onScroll 事件添加到 div。 如果您在 div 內滾動，它將被調用。 但實際上，您正在窗口中滾動。 因此，您需要在窗口滾動上附加一個事件偵聽器。 為此，您可以像這樣使用 useEffect 鈎子。

import React, { useState, useEffect } from "react";
import "./styles.css";

export default function App() {
  const [scrollNumber, updateScrollNumber] = useState(0);
  
  useEffect(() => {
      window.addEventListener("scroll", onScroll);
      return () => window.removeEventListener("scroll", onScroll);
  }, [scrollNumber]);

  const onScroll = () => {
    console.log("updating the scrollNumber");
    updateScrollNumber(scrollNumber + 12);
  };
  return (
    <div className="App" style={{ height: 200000 }}>
      {console.log({ scrollNumber })}
      <h1>Hello CodeSandbox</h1>
      <h2>Start editing to see some magic happen!</h2>
    </div>
  );
}

有關滾動事件的更多閱讀，您可以查看此處。

Answer 2

import React, { useState, useEffect } from "react";
import "./styles.css";

export default function App() {
  const [scrollNumber, updateScrollNumber] = useState(0);
  const onScroll = () => updateScrollNumber((prevScroll) => prevScroll + 12);

  useEffect(() => {
    document.addEventListener("scroll", onScroll);

    return () => window.removeEventListener("scroll", onScroll);
  }, []);

  return (
    <div onScroll={onScroll} className="App" style={{ height: 200000 }}>
      {console.log({ scrollNumber })}
      <h1>Hello CodeSandbox</h1>
      <h2>Start editing to see some magic happen!</h2>
    </div>
  );
}

Answer 3

問題是您在 div 中使用了 onSroll。 如果你想能夠在 div 中做到這一點； 將其屬性溢出設置為滾動。 如果你想讓它在窗口滾動上工作； 添加一個事件監聽器。

這應該有效：

import React, { useState, useEffect } from "react";
import "./styles.css";

export default function App() {
  const [scrollNumber, updateScrollNumber] = useState(0);
  const onScroll = () => updateScrollNumber(scrollNumber + 12);
  useEffect(() => {
    window.addEventListener("scroll", onScroll)
    return () => window.removeEventListener("scroll", onScroll)
  })

  return (
    <div
      onScroll={onScroll}
      className="App"
      style={{ height: 200000}}
    >
      {console.log({ scrollNumber })}
      <h1>Hello CodeSandbox</h1>
      <h2>Start editing to see some magic happen!</h2>
    </div>
  );
}