Get items index on focus

[adrihle]

Get items index on focus

[Snorvarg]

Hi,
I am looking at the same thing. The this.state.current keep track of the current item active, but I have not found a way to get it out from the component. (react beginner) :)

It would be nice to have some sort of callback for this?

[asalem1]

Hey there, an example of this exists on the following site in the randomize button section:

http://andyyou.github.io/react-coverflow/

[Snorvarg]

Asalem1, the example you provide show how to set current item, but not how to get it. It would be great with a similar code example showing how to get the currently selected image, or better some kind of callback called whenever coverflow change which image is currently shown.

[Snorvarg]

I tried extending the Coverflow class, though run into some problems. Maybe this is not the way to go?

class CoverflowExt extends Coverflow {
  _handlePrevFigure = (e) => {
    super._handlePrevFigure(e);

    console.log('_handlePrevFigure() called. Callbacks called here.');
  }

  _handleNextFigure = (e) => {
    super._handleNextFigure(e);

    console.log('_handleNextFigure() called. Callbacks called here.');
  }
}

In an ideal world, I would have a place to call a callback when any mouse wheeling or dragging has happened. But I get the error message "Uncaught TypeError: Cannot read property 'call' of undefined" trying to call super._handleNextFigure(e);

---

I got it working this way:

Overriding as in the example above I am able to override the setState and get a place where I can call callbacks:

  setState(props) {
    let prev = this.state.current;

    // Source: https://stackoverflow.com/questions/41896878/react-setstate-getstate-and-asynchronous
    super.setState(props, () => {
      console.info(this.state.current);
      console.log('this works');

      if (prev !== this.state.current) {
        console.log('callbacks n stuff here');
      }
    });
  }

Hope it helps someone!