在reactjs中更改scrollTop [英] change scrollTop in reactjs

问题描述

我只是学习反应，并希望实现一个功能：
A，B都是组件，如果A滚动，则B滚动

I just learn react, and want to achieve a function : both A,B are components, if A scroll, then B scroll

以下是我的代码

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

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

but actually I want my code like this

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

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

它类似于输入

<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 （不同的
表格<输入值= {}> ，因为< A scrollTop = {}> 不起作用），绑定某些状态，这样我就可以使用 setState ，它们会自行更新。

In other words, I want some attribute, like scrollTop(different form <input value={}> ,because <A scrollTop={}> doesn't work) ,is bind with some state, so that I can just use setState, and they will update by themselves.

之前我用谷歌搜索但找不到答案。我希望我糟糕的英语不会让你感到困惑。

I googled before but can't find the answser. I hope that my poor English won't confuse you.

推荐答案

有很多模式可以实现这一目标。这个样本是我想出来让你起床的。

There are a number of patterns to achieve this. This sample is what I came up with to get you up and going.

首先创建一个组件类，它具有一个用于滚动效果的超大元素。拖动滚动条时，此组件调用其 handleScroll React属性以通知其父组件，其值为 scrollTop 。

First create a component class which has an oversize element for scroll effect. When dragging the scroll bar, this component calls its handleScroll React property to notify its parent component, with the value of 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 作为回调传递给子组件。子元素上的任何滚动都会触发回调，设置状态，导致重绘，并更新子组件。

The parent component, aka wrapper, keeps the scroll top value in its state. Its handleScroll is passed to the child components as callback. Any scroll on the child elements triggers the callback, sets the state, results in a redraw, and updates the child component.

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 =容器>< / div> 。

And render the wrapper, presuming an existing <div id="container"></div>.

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

这篇关于在reactjs中更改scrollTop的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！