当前位置: 动力学知识库 > 问答 > 编程问答 >

reactjs - React horizontal scrollbar

问题描述:

Really new to React, so forgive me if this is on page 1 of the book...

I've got a small drag and drop sample working in React. I can drag a <div> from the bottom of my page into a "target" <div> up the top. The drop handler modifies the state and the dropped element appears in the target.

All dropped elements appear in the target one after another, horizontally.

And there is the problem: I want the target div to scroll all the way to the right to show me the one I just dropped.

I added some code to my drop handler that found the target (via refs) and set scrollLeft to a big number. It causes a scroll, but never to the end. I'm assuming that is because I'm setting scrollLeft on the element before it has been rendered with the new state, and so it is set to the "previous maximum".

Can anyone point me in the right direction?

网友答案:

this.setState accepts a second optional parameter which is callback that runs after the render has completed.

For example,

this.setState({ /* your state */ }, function() { 
    ... 
    this.refs.yourRef.scrollLeft( /* someValue */); 
});
分享给朋友:
您可能感兴趣的文章:
随机阅读: