2017-04-24 15 views
1

親コンポーネントの高さは最初はありませんが、子コンポーネントが追加されると子コンポーネントが大きくなります。私は子供を追加した後上下にスクロールすることができますが、handleScroll関数が起動していないことに気付きました。親コンポーネントから起動しないonScrollに反応する

誰も同じような問題がありましたか?

constructor() { 
    super(); 
    this.handleScroll = this.handleScroll.bind(this); 
} 
handleScroll(e) { 
    console.log(e); 
} 
render() { 
    return (
    <div className="parent" onScroll={this.handleScroll}> 
    { 
     this.props.children.map((child)=>{ 
     <div>{child.name}</div> 
     }) 
    } 
) 
} 
+0

import ReactDOM from 'react-dom'; // ... constructor() { super(); this.handleScroll = this.handleScroll.bind(this); } componentDidMount() { const div = ReactDOM.findDOMNode(this.refs.someRef) div.addEventListener('scroll', this.handleScroll); } componentWillUnmount() { const div = ReactDOM.findDOMNode(this.refs.someRef) div.removeEventListener('scroll', this.handleScroll); } handleScroll(e) { console.log(e); } render() { return ( <div ref="someRef" className="parent"> { this.props.children.map((child)=>{ <div>{child.name}</div> }) } </div> ) } 

..andもとしても、あなたのdivのためのCSSを設定してください。あなたの 'div.parent'のスタイル? 'overflow:scroll; 'という属性を含んでいますか?それはレンダリング時に実際にオーバーフローしましたか? –

答えて

0

あなたはこの方法であなたのdivにスクロール機能をバインドすることができますは何

.parent{ 
    overflow-y: auto; 
} 
関連する問題