onScroll React 无法触发 [英] onScroll React cannot trigger

问题描述

为什么如果我使用 onScroll react 版本 16 无法触发如何使其工作.因为我想使用 onScroll 而不是 onWheel?.

从 'react-dom' 导入 ReactDom构造函数(道具){超级(道具)；this._fireOnScroll = this.fireOnScroll.bind(this);}fireOnScroll() {console.log('火！');}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);}使成为() {返回 (<div ref="elementToFire"><AnotherComponent imagesUrl={Array(100)}}>}

);}

解决方案

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

请参阅这支笔以获取工作示例.

然而，没有理由使用引用.只需使用 onScroll:

请参阅这支笔以获取工作示例.

why if i using onScroll react version 16 cannot fire how to make it work. because i want using onScroll than 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>
    );
}

解决方案

Your div is empty. scroll only fires if actual scrolling did happen.
So, your div needs to be smaller than its content and needs to show scrollbars.

See this pen for a working example.

However, there is no reason for using a ref. Simply use onScroll:

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

See this pen for a working example.

这篇关于onScroll React 无法触发的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！