undefined 不是对象(正在计算 'this.handleMapView.bind')
undefined is not an object (evaluating 'this.handleMapView.bind')
我一直在尝试将方法绑定到 class 但没有成功。正如文档中所述,我认为我做的一切都是正确的。我也尝试过其他绑定插件,但都无济于事。
奇怪的是,如果我直接从 render 方法进行绑定,它就可以工作,但是当我尝试从另一个方法调用一个方法时,它就会松动。
import React, { Component } from 'react';
import { Navigator, NetInfo, View } from 'react-native';
import { bindActionCreators } from 'redux';
import { connect } from 'react-redux';
import { ActionCreators } from '../actions';
import _ from 'underscore';
import Api from '../utils/api';
import FooterView from '../components/footer';
import { Container, Content, Icon,
Badge,Footer, FooterTab, Header,
Title, Card, CardItem,Text,
Spinner, List, ListItem, Tabs, Button } from 'native-base';
import theme from '../stylesheets/theme';
import Communications from 'react-native-communications';
function mapStateToProps(state) {
return {
currentUser: state.currentUserReducers,
};
};
function mapDispatchToProps(dispatch) {
return bindActionCreators(ActionCreators, dispatch);
};
class ClientDirectory extends Component {
constructor(props){
super(props);
}
renderCustomers(){
let { currentUser, isLoading } = this.props;
var customers = _.map(currentUser.customers, function(customer){
return(
<Card style={{padding: 1}}>
<CardItem header>
<Text>Shop Name: { customer.name }</Text>
</CardItem>
<CardItem cardBody>
<Text>
Name: { customer.manager_first_name } { customer.manager_last_name }{"\n"}
Region: { customer.region_name }{"\n"}
Landmark: { customer.landmark }{"\n"}
Phone Number: { customer.phone_number }
</Text>
</CardItem>
<CardItem style={{flex:1, alignItems: 'center', justifyContent: 'center', }} header>
<Button transparent style={{ flex:1 }} onPress={ () => Communications.phonecall(customer.phone_number, false)}><Icon name='ios-call' /></Button>
<Button transparent style={{ flex:1 }} onPress={ () => Communications.text(customer.phone_number)}><Icon name='ios-chatboxes'/></Button>
<Button transparent style={{ flex:1 }} onPress={ this.handleMapView.bind(this) }><Icon name='ios-compass' /></Button>
</CardItem>
</Card>
);
});
return customers;
}
handleMapView(){
let { navigator } = this.props;
navigator.push({
name: 'ViewOnMap',
});
}
render(){
return (
<Container>
<Header>
<Button transparent>.</Button>
<Title>Bonus client list</Title>
<Button transparent>
<Icon name='ios-menu' />
</Button>
</Header>
<Content style={{padding: 10, marginBottom:10}}>
{ this.renderCustomers() }
</Content>
</Container>
);
}
};
export default connect(mapStateToProps,mapDispatchToProps)(ClientDirectory);
顺便提一下,我试过下面的方法,但没有成功
http://moduscreate.com/using-es2016-decorators-in-react-native/
https://www.npmjs.com/package/autobind-decorator
我们将不胜感激任何帮助。
谢谢
这成功了。
var _this = this;
http://javascriptplayground.com/blog/2012/04/javascript-variable-scope-this/
像这样将绑定移动到构造函数:
constructor(props){
super(props);
this.handleMapView = this.handleMapView.bind(this);
}
然后您的 onPress 回调应该如下所示:
onPress={ this.handleMapView }
我一直在尝试将方法绑定到 class 但没有成功。正如文档中所述,我认为我做的一切都是正确的。我也尝试过其他绑定插件,但都无济于事。
奇怪的是,如果我直接从 render 方法进行绑定,它就可以工作,但是当我尝试从另一个方法调用一个方法时,它就会松动。
import React, { Component } from 'react';
import { Navigator, NetInfo, View } from 'react-native';
import { bindActionCreators } from 'redux';
import { connect } from 'react-redux';
import { ActionCreators } from '../actions';
import _ from 'underscore';
import Api from '../utils/api';
import FooterView from '../components/footer';
import { Container, Content, Icon,
Badge,Footer, FooterTab, Header,
Title, Card, CardItem,Text,
Spinner, List, ListItem, Tabs, Button } from 'native-base';
import theme from '../stylesheets/theme';
import Communications from 'react-native-communications';
function mapStateToProps(state) {
return {
currentUser: state.currentUserReducers,
};
};
function mapDispatchToProps(dispatch) {
return bindActionCreators(ActionCreators, dispatch);
};
class ClientDirectory extends Component {
constructor(props){
super(props);
}
renderCustomers(){
let { currentUser, isLoading } = this.props;
var customers = _.map(currentUser.customers, function(customer){
return(
<Card style={{padding: 1}}>
<CardItem header>
<Text>Shop Name: { customer.name }</Text>
</CardItem>
<CardItem cardBody>
<Text>
Name: { customer.manager_first_name } { customer.manager_last_name }{"\n"}
Region: { customer.region_name }{"\n"}
Landmark: { customer.landmark }{"\n"}
Phone Number: { customer.phone_number }
</Text>
</CardItem>
<CardItem style={{flex:1, alignItems: 'center', justifyContent: 'center', }} header>
<Button transparent style={{ flex:1 }} onPress={ () => Communications.phonecall(customer.phone_number, false)}><Icon name='ios-call' /></Button>
<Button transparent style={{ flex:1 }} onPress={ () => Communications.text(customer.phone_number)}><Icon name='ios-chatboxes'/></Button>
<Button transparent style={{ flex:1 }} onPress={ this.handleMapView.bind(this) }><Icon name='ios-compass' /></Button>
</CardItem>
</Card>
);
});
return customers;
}
handleMapView(){
let { navigator } = this.props;
navigator.push({
name: 'ViewOnMap',
});
}
render(){
return (
<Container>
<Header>
<Button transparent>.</Button>
<Title>Bonus client list</Title>
<Button transparent>
<Icon name='ios-menu' />
</Button>
</Header>
<Content style={{padding: 10, marginBottom:10}}>
{ this.renderCustomers() }
</Content>
</Container>
);
}
};
export default connect(mapStateToProps,mapDispatchToProps)(ClientDirectory);
顺便提一下,我试过下面的方法,但没有成功
http://moduscreate.com/using-es2016-decorators-in-react-native/
https://www.npmjs.com/package/autobind-decorator
我们将不胜感激任何帮助。 谢谢
这成功了。
var _this = this;
http://javascriptplayground.com/blog/2012/04/javascript-variable-scope-this/
像这样将绑定移动到构造函数:
constructor(props){
super(props);
this.handleMapView = this.handleMapView.bind(this);
}
然后您的 onPress 回调应该如下所示:
onPress={ this.handleMapView }