new to react native, trying to render the main page with a button on the navigation to go the user page.
var TourChampIOs = React.createClass({
getInitialState() {
....
},
ponentWillMount() {
....
},
_handleUserDataPress: function() {
// Get by ref not prop
this.refs.nav.push({
ponent: UserPage,
title: 'User Page'
});
},
render: function() {
return <NavigatorIOS
style={styles.container}
initialRoute={{
title: 'Tour Champ',
ponent: ThemeList,
rightButtonTitle: tc.user.displayName.split(' ')[0],
onRightButtonPress: this._handleUserDataPress
}}/>;
}
the error i'm getting is
Error: Cannot read property 'push' of undefined
new to react native, trying to render the main page with a button on the navigation to go the user page.
var TourChampIOs = React.createClass({
getInitialState() {
....
},
ponentWillMount() {
....
},
_handleUserDataPress: function() {
// Get by ref not prop
this.refs.nav.push({
ponent: UserPage,
title: 'User Page'
});
},
render: function() {
return <NavigatorIOS
style={styles.container}
initialRoute={{
title: 'Tour Champ',
ponent: ThemeList,
rightButtonTitle: tc.user.displayName.split(' ')[0],
onRightButtonPress: this._handleUserDataPress
}}/>;
}
the error i'm getting is
Error: Cannot read property 'push' of undefined
2 Answers
Reset to default 4you need to assign a ref attribute to your ponent when returned from render and give "nav" as its value
render: function() {
return <NavigatorIOS
ref="nav" // Here is the change
style={styles.container}
initialRoute={{
title: 'Tour Champ',
ponent: ThemeList,
rightButtonTitle: tc.user.displayName.split(' ')[0],
onRightButtonPress: this._handleUserDataPress
}}/>;
}
I'm not sure what you are trying to do and if the use of refs is really adapted to what you want. I certainly would not use ref as a way to stock a reference of the page you want to go onclick.
I you still choose to do this ugly thing, just put the ref in the rendering function: Click This!
retrieve the ref in the handleClick function
handleClick = function() {
doSomethingWithThisref(this.refs.UserPage);
// or
// set a new state for this ponent
this.setState({someState:"somedata", function() {
React.findDOMNode(this.refs.UserPage);
});
}
ref is used to have a reference to the DOM instead of the virtual DOM returned by React render function. Here is a good example : https://facebook.github.io/react/docs/more-about-refs.html
By the way you can't access this.refs because you probably didn't set any ref in the render function. But, in my opinion, you shouldn't set refs dynamically with an handler but in the render function.
Hope it helps