Question

为什么如果我使用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>
    );
}

Answer 1

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

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

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

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

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

Answer 2

您的引用未正确分配给它应该是div <div ref = {this.elementToFire} > 如果不起作用，请尝试

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

this.elementToFire = React.createRef();

希望它能运作

onScroll React无法触发

2 个答案: