我正在尝试使用TouchableOpacity的onPress在React Native中创建一个按钮。我以前可以使用它,但是现在我在“喜欢”函数中添加了一些额外的功能,因此不再起作用。
onPress应该为函数提供一个参数。
我在iOS模拟器中收到错误Unhandled JS Exception: TyperError: undefined is not an object (evaluating '_this.onPress.bind')
。
我的代码:
export default class App extends Component {
constructor(props) {
super(props)
this.state = { liked: [false, false, false] }
this.onPress = this.onPress.bind(this)
}
like = (id) => {
const liked = this.state.liked
liked[id] = !liked[id]
this.setState({
liked: [!this.state.liked[0], false, false ],
});
}
render() {
return (
<Swiper style={SliderStyles.wrapper} showsButtons={false}>
<View style={SliderStyles.slide1}>
<View style={CardStyles.card}>
<View style={CardStyles.card_img} >
<Image source={require('./recources/ny.jpg')} style={CardStyles.images}/>
</View>
<View style={CardStyles.card_details}>
<Text style={TextStyles.card_title} >New York</Text>
<View style={CardStyles.card_action}>
<TouchableOpacity style={CardStyles.card_button} onPress={() => this.like(0)}>
<Image source={ this.state.liked[0] === true ?
require('./recources/icons/heart_closed.png') :
require('./recources/icons/heart_open.png')
} style={CardStyles.card_button_img}/>
</TouchableOpacity>
</View>
<Text style={TextStyles.card_name}>Seppe De Langhe</Text>
</View>
</View>
</View>
</View>
</Swiper>
);
}
}
Picture of what my iOS simulator looks like
感谢您的帮助!
答案 0 :(得分:0)
您似乎没有绑定的onPress
方法,您的方法称为like
,因为您使用的是箭头功能,所以它已经绑定了。
export default class App extends Component {
state = {
liked: [false, false, false],
};
like = (id) => {
this.setState(state => {
state.liked[id] = !state.liked[id];
return state;
});
}
render() {
return (
<Swiper style={SliderStyles.wrapper} showsButtons={false}>
<View style={SliderStyles.slide1}>
<View style={CardStyles.card}>
<View style={CardStyles.card_img} >
<Image source={require('./recources/ny.jpg')} style={CardStyles.images}/>
</View>
<View style={CardStyles.card_details}>
<Text style={TextStyles.card_title} >New York</Text>
<View style={CardStyles.card_action}>
<TouchableOpacity style={CardStyles.card_button} onPress={() => this.like(0)}>
<Image source={ this.state.liked[0] === true ?
require('./recources/icons/heart_closed.png') :
require('./recources/icons/heart_open.png')
} style={CardStyles.card_button_img}/>
</TouchableOpacity>
</View>
<Text style={TextStyles.card_name}>Seppe De Langhe</Text>
</View>
</View>
</View>
</View>
</Swiper>
);
}
}