reactjs - onScroll react 只适用于窗口？

Question

我正在用 React 制作一个个人网站，我想在滚动方面做一些技巧，但你知道它是怎么回事，卡在了第一步。我的 react 是

  class App extends Component {
  makeTextLarger(e) {
    console.log(e)
    console.log("scrolling")
  }
  componentDidMount() {
      const list = ReactDOM.findDOMNode(this.refs.test)
      console.log(list)

      list.addEventListener('scroll', this.makeTextLarger);
  }
  componentWillUnmount() {
      const list = ReactDOM.findDOMNode(this.refs.test)
      list.removeEventListener('scroll', this.makeTextLarger);
  }
  render() {
    var style = {
      height: '10000px',
      fontSize: 200,
      background: 'blue'
    };
    return (
      <div className="App">
        <header className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
          <h1 className="App-title"</h1>
        </header>
        <p className="App-intro">
          text to be made bigger at some point
        </p>
        <div ref="test" style={style}>
          Pls
        </div>
      </div>
    );
  }
}

当我滚动时，其中没有任何东西触发。如果我改为查看使用窗口而不是特定的 div，它就可以工作。当我 console.log 列表时，它确实返回了一个 html 对象，所以我不确定为什么我的绑定(bind)有选择地工作。有什么想法吗？

Answer 1

您可以向读取“滚动”事件的组件添加一个事件监听器。

例如，这里重写了您的组件。仅更改了方法，未添加任何引用:

class App extends Component {
  constructor() {
    super()
    this.state = {
      count: 0
    }
  }
  componentDidMount() {
    window.addEventListener('scroll', this.handleScroll)
  }

  componentWillUnmount() {
    window.removeEventListener('scroll', this.handleScroll)
  }
  handleScroll = () => {
    this.setState(
      { count: this.state.count + 1 },
      console.log('Scroll', this.state.count)
    )
  }
  render() {
    var style = {
      height: '10000px',
      fontSize: 200,
      background: 'blue'
    }
    return (
      <div className="App">
        <header className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
          <h1 className="App-title" />
        </header>
        <p className="App-intro">text to be made bigger at some point</p>
        <div ref="test" style={style}>
          Pls
        </div>
      </div>
    )
  }
}

你会得到稳定的 console.logs 流到你的浏览器。它应该接近准确，但并不完美，因为 this.setState 是异步的。

您还可以使用 handleScroll = (e) => {

传入事件本身

供引用:Update style of a component onScroll in React.js