首頁猿問更新滾動反應鉤子上的狀態(tài)

更新滾動反應鉤子上的狀態(tài)

JavaScript

陪伴而非守候 2023-07-06 15:13:12

我希望能夠在用戶滾動時更新我的狀態(tài)。這是我所擁有的近似值：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條經(jīng)驗獲得超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條經(jīng)驗獲得超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 (

{console.log({ scrollNumber })}

<h1>Hello CodeSandbox</h1>

<h2>Start editing to see some magic happen!</h2>

</div>

);

}

反對回復 2023-07-06

揚帆大魚

TA貢獻1799條經(jīng)驗獲得超9個贊

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

這應該有效：

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 關注
191 瀏覽

關注

添加回答

舉報

0/150

提交

取消

使用 Ctrl+D 可將網(wǎng)站添加到書簽

微信客服

購課補貼
聯(lián)系客服咨詢優(yōu)惠詳情

幫助反饋 APP下載

慕課網(wǎng)APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網(wǎng)微信公眾號

第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

熱搜

最近搜索清空

更新滾動反應鉤子上的狀態(tài)

更新滾動反應鉤子上的狀態(tài)

3 回答

添加回答