CODEWITHSUNDEEP
javascriptdomreactjsfluxreact-alt
Boyswan
Boyswan

Reputation: 224

FindDOMNode flux/alt store

I'm trying to access a dom node from a store (using alt) in order to animate using velocity.js, however am only getting 'cannot read property of undefined'. Is it possible to use findDOMNode from an alt/flux store? 

import React from 'react'
import alt from '../_alt';
import Actions from '../actions/actions';
import Velocity from 'velocity-animate/velocity';
import Body from '../modules/level_1/body/body1'


class Store {

  constructor(){

    this.bindListeners({
      menuToggle: Actions.MENU_TOGGLE
    });

    this.menuStatus = false

  }

  menuToggle(){
    if (!this.menuStatus){ 
      this.menuStatus = true;
      Velocity(React.findDOMNode(Body.refs.wrap),({ width: '50px' }), 50) 
    } else {
      this.menuStatus = false;
    }
  }

}

export default alt.createStore(Store, 'Store');

Component:

import React from 'react';
import connectToStores from 'alt/utils/connectToStores';
import Store from '../../../stores/store'
import Actions from '../../../actions/actions';
import Styles from './body1.css';


import Hero from '../../objects/hero/full_width' 

let image = ['../../../../assets/full_width1.jpg', 'image']

@connectToStores
export default class Body extends React.Component {

  static getStores(){
    return [Store];
  }

  static getPropsFromStores(){
    return Store.getState();
  }

    render(){
        return (
            <div ref='wrap'>
                <Hero content={image} />
            </div>
        );
    }

}

Upvotes: 1

Views: 277

Answers (2)

jaredkwright
jaredkwright

Reputation: 1380

A pattern that I have used with some success is to create an initialize action that takes as one of its arguments a React component. Then in componentDidMount() you can call that action, passing this as an argument. This allows your store to have a handle on that React element, as well as all of its associated properties so you can do things like React.findDOMNode(component.refs['someref']).

Upvotes: 0

Piercey4
Piercey4

Reputation: 1358

Body is a react class, which does not have refs. What you need is a react element (an instance of a react class) which is the "this" inside of render, componentDidMount, etc.

You will have to provide the react element to the store in some way (probably by calling menuToggle with the actual react element).

Alternatively you could use componentDidMount to set the ref on the Body class so that toggle could consume it.

Upvotes: 0

Related Questions