react-native - undefined 不是函数(评估...........点击onPress时反应原生
问题描述
这是代码,单击图标标签时我无法调用removeItem
函数。请帮助我,我是反应原生的初学者。我被困了 3 天。
请以正确的方式帮助我调用函数。谢谢
import React from 'react';
import { StyleSheet, Text, View,TextInput,KeyboardAvoidingView,Dimensions,ScrollView,Alert,TouchableOpacity,Button,TouchableHighlight } from 'react-native';
import Icon from 'react-native-vector-icons/Entypo';
var {height, width} = Dimensions.get('window');
var d = new Date();
export default class App extends React.Component {
constructor(props){
super(props);
this.state = {
noteList: [],
noteText: ''
}
}
addItems(){
var a = this.state.noteText;
this.state.noteList.push(a)
this.setState({
noteText:''
})
console.log(this.state.noteList)
}
removeItem(key) {
console.log('removeItem is working',key);
}
render() {
return (
<KeyboardAvoidingView style={styles.container} behavior="padding" enabled>
<View style={styles.header}>
<Text style={{fontSize: 20}}>NOTE APPLICATION</Text>
</View>
<View style={styles.body}>
<ScrollView>
{this.state.noteList.map(function(value,key){
return(
<View key={key} style={styles.bodyElements} >
<Text>{key}</Text>
<Text>{value}</Text>
<Text>{d.toDateString()}</Text>
<Icon onPress={(key) => this.removeItem(key)} name="cross" color="white" size={40}/>
</View>
)
})}
</ScrollView>
</View>
<View style={styles.footer}>
<TextInput style={{marginTop:10,marginLeft:10}}
placeholder="Jot down your thoughts before they vanish :)"
width={width/1.2}
underlineColorAndroid="transparent"
onChangeText={(noteText) => this.setState({noteText})}
value={this.state.noteText}
/>
<Icon style={{marginTop:15}} name="add-to-list" color="white" size={40} onPress={this.addItems.bind(this)}/>
</View>
</KeyboardAvoidingView>
);
}
}
解决方案
我没有你的数组数据,所以我使用 a,b 值。但是地图功能的问题在这里,您需要将其作为 params 传递。签入代码
import React from 'react';
import { StyleSheet, Text, View, TextInput, KeyboardAvoidingView, Dimensions, ScrollView, Alert, TouchableOpacity, Button, TouchableHighlight } from 'react-native';
// import Icon from 'react-native-vector-icons/Entypo';
var { height, width } = Dimensions.get('window');
var d = new Date();
export default class App extends React.Component {
constructor(props) {
super(props);
this.state = {
noteList: ['a','b'],
noteText: ''
}
}
addItems() {
var a = this.state.noteText;
this.state.noteList.push(a)
this.setState({
noteText: ''
})
console.log(this.state.noteList)
}
removeItem(key) {
console.warn('removeItem is working');
}
render() {
return (
<View >
<View style={styles.header}>
<Text style={{ fontSize: 20 }}>NOTE APPLICATION</Text>
<Button title="try" onPress={(key) => this.removeItem()} name="cross"
size={40} />
</View>
<View style={styles.body}>
{this.state.noteList.map(function(value,key){
return(
<View key={key} style={styles.bodyElements} >
<Text>{key}</Text>
<Text>{value}</Text>
<Text>{d.toDateString()}</Text>
<Button title="try"
onPress={() => this.removeItem()}
name="cross"
color="white"
size={40}/>
</View>
)
},this)}
</View>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#F5FCFF',
},
welcome: {
fontSize: 25,
textAlign: 'center',
margin: 10,
},
child: {
fontSize: 18,
textAlign: 'center',
margin: 10,
backgroundColor: 'green',
height: 100,
width: 200,
},
});
推荐阅读
- laravel - 使用 laravel 刷新数据表 vuejs 中的值
- angular - Angular 9 + Spring Boot + CAS 身份验证?
- django - 如何使用 django 创建“排序依据”下拉输入?
- postgresql - where 子句中外部联接表的列上的可选过滤器
- python - Django 将窗口函数与标准注释相结合
- azure - Azure terratest - 构建约束排除所有 Go 文件
- sql - 将 TO_NUMBER() 无效格式错误视为 NULL
- vue.js - Auth0 路由保护不适用于 Nuxt 中间件
- git - Gitlab - CI 分支与 HEAD 分支之间的 Git 差异
- file - 检测文件是否可以在 Scheme 中打开