onScroll in reagiert nur auf das Fenster?

Question

Ich mache eine persönliche Website in Reaktion, und ich wollte ein paar Tricks mit dem Scrollen machen, aber Sie wissen, wie es geht, stecken auf Schritt eins. Alles, was ich in meiner Reaktion habe, ist

class App extends Component { 
    makeTextLarger(e) { 
    console.log(e) 
    console.log("scrolling") 
    } 
    componentDidMount() { 
     const list = ReactDOM.findDOMNode(this.refs.test) 
     console.log(list) 

     list.addEventListener('scroll', this.makeTextLarger); 
    } 
    componentWillUnmount() { 
     const list = ReactDOM.findDOMNode(this.refs.test) 
     list.removeEventListener('scroll', this.makeTextLarger); 
    } 
    render() { 
    var style = { 
     height: '10000px', 
     fontSize: 200, 
     background: 'blue' 
    }; 
    return (
     <div className="App"> 
     <header className="App-header"> 
      <img src={logo} className="App-logo" alt="logo" /> 
      <h1 className="App-title"</h1> 
     </header> 
     <p className="App-intro"> 
      text to be made bigger at some point 
     </p> 
     <div ref="test" style={style}> 
      Pls 
     </div> 
     </div> 
    ); 
    } 
} 

In dem nichts feuert, als ich scroll. Wenn ich statt des spezifischen div stattdessen das use window anschaue, funktioniert es. Wenn ich die Liste console.log anmelde, gibt es tatsächlich ein HTML-Objekt zurück, daher bin ich mir nicht sicher, warum meine Bindung selektiv funktioniert. Irgendwelche Gedanken?

Answer 1

Sie können einen Ereignis-Listener zu Ihrer Komponente hinzufügen, die das "scroll" Ereignis liest.

Zum Beispiel ist hier eine Neufassung Ihrer Komponente. Nur die Methoden verändert wurden, wurden keine Refs hinzugefügt:

class App extends Component { 
    constructor() { 
    super() 
    this.state = { 
     count: 0 
    } 
    } 
    componentDidMount() { 
    window.addEventListener('scroll', this.handleScroll) 
    } 

    componentWillUnmount() { 
    window.removeEventListener('scroll', this.handleScroll) 
    } 
    handleScroll =() => { 
    this.setState(
     { count: this.state.count + 1 }, 
     console.log('Scroll', this.state.count) 
    ) 
    } 
    render() { 
    var style = { 
     height: '10000px', 
     fontSize: 200, 
     background: 'blue' 
    } 
    return (
     <div className="App"> 
     <header className="App-header"> 
      <img src={logo} className="App-logo" alt="logo" /> 
      <h1 className="App-title" /> 
     </header> 
     <p className="App-intro">text to be made bigger at some point</p> 
     <div ref="test" style={style}> 
      Pls 
     </div> 
     </div> 
    ) 
    } 
} 

Sie werden mit diesem einen stetigen Strom von console.logs zu Ihrem Browser erhalten. Es sollte nahezu genau, aber nicht perfekt sein, da this.setState asynchron ist.

Sie können auch im Fall passieren selbst mit handleScroll = (e) => {

Zum Vergleich: Update style of a component onScroll in React.js

Answer 2

versuchen, den OnScroll Handler Angebote reagieren

render() { 
    var style = { 
     height: '10000px', 
     fontSize: 200, 
     background: 'blue' 
    }; 
    return (
     <div className="App"> 
     <header className="App-header"> 
      <img src={logo} className="App-logo" alt="logo" /> 
      <h1 className="App-title"</h1> 
     </header> 
     <p className="App-intro"> 
      text to be made bigger at some point 
     </p> 
     <div onScroll={this. makeTextLarger} style={style}> 
      Pls 
     </div> 
     </div> 
    ); 
    } 
} 

wenn Sie

<div ref={ref => this.title = ref} style={style}> 
      Pls 
</div> 

dann in Ihren Lebenszyklus Methoden this.title eine ref über die Verwendung bestehen verwenden.

schließlich binden immer Ihren Event-Handler

makeTextLarger = (e) => { 
    console.log(e) 
    console.log("scrolling") 
    }