John3136 John3136 - 1 year ago 148
React JSX Question

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?

Answer Source

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 */;
});
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download