首页 文章

undefined不是一个函数（在点击onPress时评估...在本机中的反应

提问于
浏览 次
3

这是我点击Icon标签时无法调用removeItem函数的代码 . 请帮助我，我是一个反应原生的初学者 . 我被困3天请以正确的方式帮助我调用函数 . 提前致谢

从'react'中导入React;

从'react-native'导入{StyleSheet，Text，View，TextInput，KeyboardAvoidingView，Dimensions，ScrollView，Alert，TouchableOpacity，Button，TouchableHighlight};

从'react-native-vector-icons / Entypo'导入图标;

var {height，width} = Dimensions.get（'window'）;

var d = new Date（）;

export default class App扩展了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>
);

}}

react-native

1 回答

  • 1

    我没有你的数组数据所以我使用a，b值 . 但mamy问题与 Map 功能在这里，你需要传递 this 作为参数 . 检查代码

    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,
  },
});
    回复于

相关问题