JedWatson / react-tappable

Tappable component for React

Home Page:http://jedwatson.github.io/react-tappable/

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

is it possible to get a ref to the created component?

mattcolman opened this issue · comments

Hi, if I specify component="div" is it possible to get a ref to that div?
The current ref returned is the React Class Component, not the div...not sure why?
Thanks!

nevermind, just realised I can use findDOMNode to get the ref.

@mattcolman could you explain better how you managed this problem ?

Cf #132

Thanks a lot

yeah so the ref from Tappable returns the Tappable instance, say tappableRef. Then you can call ReactDOM.findDOMNode(tappableRef) to get the div. Does that make sense?

Thanks a lot @mattcolman !
Doesn't work for me, it doesn't return the DOM element but the React Class of Tappable as ref, here's my code :

class TestTappable extends React.Component {
    divTapped = () => {
        // Returns error "getBoundingClientRect() not defined" BECAUSE this.TappableElement is not the <div> element generated by <Tappable> but the javascript React Class
        const divPosition = this.TappableElement.getBoundingClientRect();
    }

    render() {
        return (
            <Tappable
                type="div"
                ref={element => thisTappableElement = element}
                onTap={this.divTapped}
            >
                TEST
            </Tappable>
        )
    }
}

Ok solved, that works with it :

class TestTappable extends React.Component {
    divTapped = () => {
        const tappableDOMElement = ReactDOM.findDOMNode(tappableRef)
        const divPosition = tappableDOMElement.getBoundingClientRect();
    }

    render() {
        return (
            <Tappable
                type="div"
                ref={element => thisTappableElement = element}
                onTap={this.divTapped}
            >
                TEST
            </Tappable>
        )
    }
}