cambiamento scrollTop in reactjs

Question

ho appena imparato reagire, e voglio realizzare una funzione: sia A, B sono componenti, se un rotolo, poi B scorrimento

Quello che segue è il mio codice

<A onScroll="handleScroll"></A>

//what i write now 
handleScroll: function(event){ 
    var target = event.nativeEvent.target; 

    //do something to change scrollTop value 
    target.scrollTop += 1; 

    // it looks the same as not use react 
    document.getElementById(B).scrollTop = target.scrollTop; 
} 

ma in realtà io voglio che il mio codice come questo

//what i want 
<A scrollTop={this.props.scrollSeed}></A> 
<B scrollTop={this.props.scrollSeed}></B> 

//... 
handleScroll(){ 
    this.setState({scrollSeed: ++this.state.scrollSeed}) 
} 

è simile al input

<input value="this.props.value"/> 
<input value="this.props.value"/> 
<input ref='c' onChange={handleChange}> 

//... 
handleChange: function() { 
    // enter some code in c and then render in a and b automatically 
} 

In altre parole, voglio qualche attributo, come scrollTop (diversa forma <input value={}>, perché <A scrollTop={}> non funziona), si legano con uno stato, in modo che io possa basta usare setState e si aggiorneranno da soli.

Ho cercato su Google ma non riesco a trovare il risponditore. Spero che il mio povero inglese non ti confonda.

Answer 1

Ci sono un certo numero di modelli per raggiungere questo obiettivo. Questo sample è quello che mi è venuto in mente per farti andare e venire.

Per prima cosa creare una classe componente con un elemento di dimensioni maggiori per effetto di scorrimento. Quando si trascina la barra di scorrimento, questo componente chiama la proprietà React handleScroll per notificare il componente principale, con il valore di scrollTop.

var Elem = React.createClass({ 
    render() { 
     return (
      <div ref="elem" 
       onScroll={ this.onScroll } 
       style={{ width: "100px", height: "100px", overflow: "scroll" }}> 
       <div style={{ width: "100%", height: "200%" }}>Hello!</div> 
      </div> 
     ); 
    }, 
    componentDidUpdate() { 
     this.refs.elem.scrollTop = this.props.scrollTop; 
    }, 
    onScroll() { 
     this.props.handleScroll(this.refs.elem.scrollTop); 
    } 
}); 

Il componente padre, noto anche come wrapper, mantiene il valore superiore di scorrimento nel suo stato. Il suo handleScroll viene passato ai componenti figlio come richiamata. Qualsiasi scorrimento sugli elementi figlio attiva la richiamata, imposta lo stato, genera un ridisegno e aggiorna il componente figlio.

var Wrapper = React.createClass({ 
    getInitialState() { 
     return { 
      scrollTop: 0 
     } 
    }, 
    render() { 
     return (
      <div> 
       <Elem scrollTop={ this.state.scrollTop } handleScroll={ this.handleScroll } /> 
       <Elem scrollTop={ this.state.scrollTop } handleScroll={ this.handleScroll } /> 
      </div> 
     ); 
    }, 
    handleScroll(scrollTop) { 
     this.setState({ scrollTop }); 
    } 
}); 

E rendere l'involucro, presumendo un <div id="container"></div> esistente.

ReactDOM.render(
    <Wrapper />, 
    document.getElementById('container') 
);