onScroll React 无法触发

IT技术 reactjs scroll
2021-05-26 04:35:04

为什么如果我使用 onScroll react 版本 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>
    );
}
2个回答

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

有关工作示例,请参阅这支笔

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

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

有关工作示例,请参阅这支笔

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

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

this.elementToFire = React.createRef();

希望它会起作用