反应中的onScroll仅适用于窗口？答案

【问题标题】：onScroll in react only works on the window?反应中的onScroll仅适用于窗口？
【发布时间】：2017-11-22 03:31:59
【问题描述】：

我正在制作一个个人网站来响应，我想用滚动做一些技巧，但你知道它是怎么回事，卡在第一步。我的反应是

  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 对象，所以我不确定为什么我的绑定有选择地工作。有什么想法吗？

【问题讨论】：

标签： reactjs

【解决方案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

【讨论】：

【解决方案2】：

尝试使用 onScroll 处理程序响应优惠

  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 onScroll={this. makeTextLarger} style={style}>
          Pls
        </div>
      </div>
    );
  }
}

如果你坚持使用 ref

<div ref={ref => this.title = ref} style={style}>
          Pls
</div>

然后在你的生命周期方法中使用 this.title。

最后总是绑定你的事件处理程序

makeTextLarger = (e) => {
    console.log(e)
    console.log("scrolling")
  }

【讨论】：