javascript - 在reactjs中更改scrollTop

我只是学习反应，并想要实现一个功能:
两者A，B都是组件，如果A滚动，则B滚动

以下是我的代码
<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;
}

但实际上我想要这样的代码

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

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

它类似于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
}

换句话说，我想要一些属性，例如scrollTop(不同
表单<input value={}>，因为<A scrollTop={}>不起作用)绑定(bind)了某种状态，所以我只能使用setState，它们会自行更新。

我之前在Google上搜索过，但找不到答案。希望我的英语不好，不要让您感到困惑。

最佳答案

有多种模式可以实现此目的。这是我想出的sample，它可以助您一臂之力。

首先创建一个组件类，该组件类具有用于滚动效果的特大元素。拖动滚动条时，此组件调用其handleScroll React属性以使用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 );
    }
});

父组件(也称为包装器)将滚动顶值保持在其状态。它的handleScroll作为回调传递给子组件。子元素上的任何滚动都将触发回调，设置状态，导致重绘并更新子组件。

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 });
    }
});

并假设现有的<div id="container"></div>渲染包装器。

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

关于javascript - 在reactjs中更改scrollTop，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/33748967/

scrolltop

javascript - 在reactjs中更改scrollTop