如何在组件开始滚动时向组件添加类,然后在无状态组件中停止滚动时将其删除。
这不起作用
import React from 'react'
let scrollClass = 'Feed';
function handleScroll(e) {
scrollClass = 'Feed scrolling';
}
export default function Feed(){
return (
<div className={scrollClass} onScroll={(e) => handleScroll(e)}>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur arcu leo.
</div>
)
}
最佳答案
为了使组件对状态更改使用react,您应该使用 the component's state这样做可以从React.component
延伸基类。另外,由于没有像 onStopScroll
这样的事件所以你可以设置一个计时器,当 onScroll
事件发生:
import React from 'react'
export default class Feed extends React.component {
constructor(props) {
super(props)
this.state = { scrollClass: 'Feed' }
}
handleScroll(e) {
this.setState({ scrollClass: 'Feed scrolling' })
setTimeout(() => { this.setState({ scrollCLass: 'Feed' }) }, 100)
}
render() {
let { scrollClass } = this.state
return <div className={ scrollClass } onScroll={ this.handleScroll }>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur arcu leo.
</div>
}
}
这是说明性的,我没有运行这段代码。请注意,我删除了 <div>
周围的括号。并简化了onScroll
通过删除不必要的箭头函数来进行方法注入(inject),因为您不需要 event
对象。
这背后的逻辑是,即使 setTimeout
触发状态更改,每次滚动时组件的状态都会再次设置,并以新状态( scrollClass: 'Feed scrolling'
)重新渲染元素,并且循环不断进行。
关于reactjs - React 在无状态组件中添加/删除类 onScroll,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38928765/