admin管理员组文章数量:1023025
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
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
本文标签： javascriptreact native thisrefsnav is not definedStack Overflow
版权声明：本文标题：javascript - react native this.refs.nav is not defined - Stack Overflow 内容由热心网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://it.en369.cn/questions/1745532159a2154799.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论