为了账号安全,请及时绑定邮箱和手机立即绑定

更新滚动反应钩子上的状态

更新滚动反应钩子上的状态

陪伴而非守候 2023-07-06 15:13:12
我希望能够在用户滚动时更新我的状态。这是我所拥有的近似值: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更新?这里是一个沙箱。
查看完整描述

3 回答

?
墨色风雨

TA贡献1853条经验 获得超6个赞

第一个问题是您要向 div 添加 onScroll 事件。如果您在 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>

  );

}

查看完整回答
反对 回复 2023-07-06
?
慕容3067478

TA贡献1773条经验 获得超3个赞

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>

  );

}


查看完整回答
反对 回复 2023-07-06
?
扬帆大鱼

TA贡献1799条经验 获得超9个赞

问题是你在 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>

  );

}


查看完整回答
反对 回复 2023-07-06
  • 3 回答
  • 0 关注
  • 154 浏览
慕课专栏
更多

添加回答

举报

0/150
提交
取消
意见反馈 帮助中心 APP下载
官方微信