Question

您好，我在点击循环中创建的TouchableOpacity时收到以下错误。

调用它的TouchableOpacity在这里

    constructor() {

    super();

    this.pressRowContact = this.pressRowContact.bind(this);
    this.fetchData = this.fetchData.bind(this);
    this.goBack = this.goBack.bind(this);
    this.onAddedContactPress = this.onAddedContactPress.bind(this);
    this.sendMessage = this.sendMessage.bind(this);

    this.state = {
      loadingVisible: false,
      inputText: "",
      arrayContactsSelected: [],
      dataContactList: [],
      showContactList: false,
    };
  }


  componentDidMount() {
    this.fetchData();
  }


  onChangeTextHandler = (e) => {
    this.textInputValue = e;
  }


  onAddedContactPress(){}


  render() {

    const { navigate } = this.props.navigation;

    console.log(this.state.showContactList);

    if(this.state.showContactList == true){
        var contactListView = <View style={styles.contactListWrapper}>
            <FlatList
                data = {this.state.dataContactList}
                renderItem={({item}) => <TouchableOpacity onPress={() => this.pressRowContact( item )} >
                <View style={styles.contactRow}>
                    <View style={styles.standardProfilePicWrapper}>
                        <Image source={require('../../images/demo/Profile/sample2.jpg')} style={{width: 30, height: 30}}/>
                    </View>
                    <Text>Someone Name Here</Text>
                </View>
            </TouchableOpacity>}
            />
        </View>
    }else {
        var contactListView;
    }


    var selectedUsers = this.state.arrayContactsSelected.map(function(item) {
        return (
            <TouchableOpacity onPress={() => this.onAddedContactPress(item)} key={item.userID} style={styles.selectedUserItem} >
                <View style={styles.smallProfilePictureWrapper}>
                        <Image source={require('../../images/demo/Profile/sample2.jpg')} style={{width: 14, height: 14}}/>
                    </View>
                <Text style={styles.contactSelectedName} >Oliver Rice</Text>
            </TouchableOpacity>
        );
     });

    /*<TextInput
                            style={styles.addContactInput}
                            onChangeText={this.onChangeTextHandler}
                            value={this.state.inputText}
                          />*/

    return (
        <KeyboardAvoidingView behavior="padding" style={{flex: 1}}>
        <View style={{flex: 1}}>
            <StatusBar hidden={true} />
            <View style={styles.headerBar}>
                <NavBar navigation={this.props.navigation} goBack={this.goBack} title="NEW MESSAGE" backButton={true} />
            </View>
            <View style={styles.contentWrapper}>
                <View style={styles.addContactWrapper} >
                    <View style={styles.addContactLeft} >
                        <Text style={styles.contactTo}>To:</Text>
                    </View>
                    <View style={styles.addContactRight} >
                        {selectedUsers}
                        <TouchableOpacity style={styles.addedContactWrapper} onPress={() => this.showContacts("")}>
                            <Image source={require('../../images/icons/IconAddContact.png')} style={{width: 18, height: 18}}/>
                        </TouchableOpacity>
                    </View>
                </View>
                <View style={styles.mainContentWrapper} >
                    {contactListView}
                    <TextInput
                        style={styles.inputTextMainMessage}
                        multiline={true}
                        placeholder="Your message here"
                        blurOnSubmit={true}
                    />
                </View>
                <TouchableOpacity onPress={() => this.sendMessage( )} style={styles.buttonWrapper} >
                    <Text style={styles.sendMessage}>Send Message</Text>
                </TouchableOpacity>
            </View>
        </View>
        </KeyboardAvoidingView>
    );
  }

我认为我可以通过在构造函数中添加this.onAddedContactPress = this.onAddedContactPress.bind(this);来解决问题，但它没有任何影响。

Answer 1

如果你想调用它，

onAddedContactPress必须在渲染函数之外。 this指的是组件本身。对于es6语法，请尝试

onAddedContactPress = (item) => {
    console.log(item);
}

render() {
   return (
     this.state.arrayContactsSelected.map(function(item) {
      <TouchableOpacity onPress={() => this.onAddedContactPress(item)} key={item.userID} style={styles.selectedUserItem} >
        <View style={styles.smallProfilePictureWrapper}>
                <Image source={require('../../images/demo/Profile/sample2.jpg')} style={{width: 14, height: 14}}/>
            </View>
        <Text style={styles.contactSelectedName} >Name</Text>
      </TouchableOpacity> }
   );
}

Answer 2

您的onPress功能在哪里添加了？我认为这是内部渲染功能，并产生问题。

我测试了它，你的代码效果很好。

import React, { Component } from 'react';
import {
    StyleSheet,
    Text,
    View,
    TouchableOpacity,
    Alert
} from 'react-native';

export default class APP extends Component {
    constructor(){
        super();
        this.state = {
            contactsSelected: [
                {name: 'one'},
                {name: 'two'},
                {name: 'three'},
            ]
        }
    }

    onAddedContactPress(item){
        Alert.alert(item.name)
    }

    render() {
        return (
            <View style={styles.container}>
                {this.state.contactsSelected.map(item => {
                    return (
                        <TouchableOpacity onPress={() => this.onAddedContactPress(item)} key={item.name}>
                            <Text>{item.name}</Text>
                        </TouchableOpacity>
                    )
                })}
            </View>
        );
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: '#F5FCFF',
    }
});

希望这有帮助。

调用函数_this3.xxxxx（）时出错不是函数

2 个答案: