阵营onScroll不点火

Question

我有简单的反应成分，我onScroll事件设置为组件，但是当我滚动它不是射击

import React, { Component, PropTypes } from 'react' 

export default class MyComponent extends Component { 
    _handleScroll(e) { 
    console.log('scrolling') 
    } 

    render() { 
    const style = { 
     width: '100px', 
     height: '100px', 
     overflowY: 'hidden' 
    } 
    const innerDiv = { 
     height: '300px', 
     width: '100px', 
     background: '#efefef' 
    } 
    return (
     <div style={style} onScroll={this._handleScroll}> 
     <div style={innerDiv}/> 
     </div> 
    ) 
    } 
} 

Answer 1

你需要一个引用添加到DOM元素：

React onScroll not working

class ScrollingApp extends React.Component { 

    _handleScroll(ev) { 
     console.log("Scrolling!"); 
    } 
    componentDidMount() { 
     const list = ReactDOM.findDOMNode(this.refs.list) 
     list.addEventListener('scroll', this._handleScroll); 
    } 
    componentWillUnmount() { 
     const list = ReactDOM.findDOMNode(this.refs.list) 
     list.removeEventListener('scroll', this._handleScroll); 
    } 
    /* .... */ 
} 

Answer 2

您需要在构造函数中绑定_handleScroll事件。尝试添加到您的组件。

constructor() { 
    this._handleScroll = this._handleScroll.bind(this); 
} 

https://facebook.github.io/react/docs/handling-events.html

Answer 3

您需要的overflowY值更改为auto或scroll。现在你没有得到滚动条，因为hidden会导致浏览器隐藏滚动条。