Question

我的功能onPress返回undefined is not a object

这是我的代码：

import React, {Component} from 'react';
import {Image, Platform, StatusBar, ListView, TouchableHighlight} from 'react-native';
import {connect} from 'react-redux';
import {Actions} from 'react-native-router-flux';
import {
    Container,
    Content,
    Text,
    Icon,
    View,
    Left,
    Right,
    Header,
    Body,
    Title,
    Animated

} from 'native-base';

import styles from './styles';


class Championnat extends Component {

    constructor(props) {
        super(props);
        const ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});
        this.state = {
            dataSource: ds.cloneWithRows([
                {slug : 'team', name : 'Liqgue1'},
                {slug : 'worldcup', name : 'Coupe du monde'},
            ]),
        };
    }

    pressRow(data) {

        console.log(data);

    }

    renderRow(data){
        return (
            <TouchableHighlight onPress={()=> this.pressRow(data)}>
                <View style={styles.lstView}>
                    <Image style={styles.lstPicto} />
                    <Text style={styles.lstText}>{data.name}</Text>
                    <Icon name="angle-right" right style={styles.lstIcon} />
                </View>
            </TouchableHighlight>

        )
    }

    render() {
        return (
            <Container style={styles.container}>

                <Header style={styles.header}>
                    <Left>
                        <Button transparent onPress={() => Actions.pop()}>
                            <Icon active name="angle-left"/>
                        </Button>
                    </Left>
                    <Body>
                        <Title>Choisir un championnat</Title>
                    </Body>
                    <Right></Right>
                </Header>

                <View style={{flex: 1}}>
                    <ListView

                        dataSource={this.state.dataSource}
                        renderRow = {this.renderRow.bind(this)}

                    ></ListView>
                </View>

            </Container>

        )
    }
}

export default connect()(Championnat);

Answer 1

在constructor内，您需要bind()您的功能，或使用箭头功能。

constructor() {
  // your code
  this.pressRow = this.pressRow.bind(this);
}

否则，将您的函数声明为箭头函数。

pressRow = (data) => {
  // your code
}

Answer 2

将renderRow(data)更改为箭头功能，如下面的代码段

renderRow = (data) => {
  // your logic
}

并确保pressRow功能应为箭头功能

pressRow = (data) => {
           console.log(data);
}

希望这会奏效。：）

Answer 3

这是tape TouchableHighlight上的TouchableHighlight时的屏幕。如果我为TouchableHighlight更改Button，则pb仅存在TouchableHighlight，没有pb。但是在官方文档（https://facebook.github.io/react-native/docs/listview.html）上，请求在listView上使用Arrays.deepEquals()

Answer 4

尝试这个..它应该工作..当你渲染一个listView时，你们每个人都属于一个唯一的ID ..

＆＃13;

pressRow(event) {
  console.log(event);
}

renderRow(data, rowID){
  return (
    <TouchableHighlight key={rowID} onPress={()=> this.pressRow(rowID)}>
    <View style={styles.lstView}>
        <Image style={styles.lstPicto} />
        <Text style={styles.lstText}>{data.name}</Text>
        <Icon name="angle-right" right style={styles.lstIcon} />
      </View>
    </TouchableHighlight>

        )
}

＆＃13;

Answer 5

这是我的整个代码：在renderRow中，如果我对评论tpr001 12456 tpr002 34645 ... ... tpr020 56468进行评论Button它不起作用，如果我发表评论TouchableHighlight并取消评估TouchableHighlight，那就是“工作”。

Button

Answer 6

import React, {Component} from 'react';
import {Image, Platform, StatusBar, ListView, TouchableHighlight} from 'react-native';
import {connect} from 'react-redux';
import {Actions} from 'react-native-router-flux';
import {
    Container,
    Content,
    Text,
    Icon,
    View,
    Left,
    Right,
    Header,
    Body,
    Title,
    Animated

} from 'native-base';

import styles from './styles';


class Championnat extends Component {

    constructor(props) {
        super(props);
        const ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});
        this.state = {
            dataSource: ds.cloneWithRows([
                {slug : 'team', name : 'Liqgue1'},
                {slug : 'worldcup', name : 'Coupe du monde'},
            ]),
        };
    }

    pressRow(data) {

        console.log(data);

    }

    renderRow(data){
        return (
            <TouchableHighlight onPress={()=> this.pressRow(data)}>
                <View style={styles.lstView}>
                    <Image style={styles.lstPicto} />
                    <Text style={styles.lstText}>{data.name}</Text>
                    <Icon name="angle-right" right style={styles.lstIcon} />
                </View>
            </TouchableHighlight>

        )
    }

    render() {
        return (
            <Container style={styles.container}>

                <Header style={styles.header}>
                    <Left>
                        <Button transparent onPress={() => Actions.pop()}>
                            <Icon active name="angle-left"/>
                        </Button>
                    </Left>
                    <Body>
                        <Title>Choisir un championnat</Title>
                    </Body>
                    <Right></Right>
                </Header>

                <View style={{flex: 1}}>
                    <ListView

                        dataSource={this.state.dataSource}
                        renderRow = {this.renderRow.bind(this)}

                    ></ListView>
                </View>

            </Container>

        )
    }
}

export default connect()(Championnat);

TouchableHighlight onPress不起作用

6 个答案: