onScroll React 无法触发答案

【问题标题】：onScroll React cannot triggeronScroll React 无法触发
【发布时间】：2018-04-23 07:47:33
【问题描述】：

为什么如果我使用 onScroll 反应版本 16 无法触发如何使其工作。因为我想使用 onScroll 而不是 onWheel？。

import ReactDom from 'react-dom'

constructor(props) {
    super(props);
    this._fireOnScroll = this.fireOnScroll.bind(this);
}

fireOnScroll() {
    console.log('Fire!');
}

componentDidMount() {
    const elem = ReactDOM.findDOMNode(this.refs.elementToFire);
    elem.addEventListener('scroll', this._fireOnScroll, true);
}

componentWillUnmount() {
    const elem = ReactDOM.findDOMNode(this.refs.elementToFire);
    elem.removeEventListener('scroll', this._fireOnScroll);
}

render() {
    return (
        <div ref="elementToFire">
      <AnotherComponent imagesUrl={Array(100)}}>}
    </div>
</div>
    );
}

【问题讨论】：

请出示您的实际代码。您在此处发布的内容无效。 ReactDom ReactDOM 和你展示的函数周围没有类。

标签： reactjs scroll

【解决方案1】：

您的 div 为空。 scroll 仅在发生实际滚动时才会触发。
因此，您的 div 需要小于其内容，并且需要显示滚动条。

有关工作示例，请参阅 this pen。

但是，没有理由使用 ref。只需使用onScroll：

<div style={{height: 75, width: 100, overflow:'scroll'}} onScroll={this.fireOnScroll}>

有关工作示例，请参阅 this pen。

【讨论】：

在您的代码中非常简单，但仍然对我不起作用。实际上，我有 100 多张图片要展示，如果我想看到我身体里得到的图片。所以我需要滚动，但 onScroll 不能触发。
如果我的回答对您没有帮助，您需要显示您的实际代码。我的答案显示了工作代码，请参阅链接。

【解决方案2】：

您的 ref 未正确分配给应分配的 div <div ref = {this.elementToFire} > 如果不行就试试

const elem = ReactDOM.findDOMNode(this.refs.elementToFire.current); 同样从你给 O 的代码中猜测你也错过了创建一个 ref 对象

this.elementToFire = React.createRef();

希望能成功

【讨论】：