reactjs - React 在无状态组件中添加/删除类 onScroll

Question

如何在组件开始滚动时向组件添加类，然后在无状态组件中停止滚动时将其删除。

这不起作用

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>
  )
}

Answer 1

为了使组件对状态更改使用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' )重新渲染元素，并且循环不断进行。