首页 > 解决方案 > TypeError: TypeError: undefined is not an object (评估 'this.onPressDropdownData(this.data).bind')

问题描述

我想要的是将涉及复选框选择、下拉选择和其他所有内容的输入记录到警报框中。我无法将下拉选择和复选框选择捕获到一种状态,并将所有这些输入的详细信息进一步放入警报框中。

下面是代码:

import * as React from 'react';
import {
    Text, View, StyleSheet, TouchableOpacity, ScrollView, Button
}
from 'react-native';
import {
    Header, Icon
}
from 'react-native-elements';
import {
    Constants
}
from 'expo';
import {
    CheckBox
}
from 'react-native-elements';

import {
    createStackNavigator,
    createNavigatorContainer
}
from "react-navigation";

import {
    Dropdown
}
from 'react-native-material-dropdown';

export
default class UpdateFrequency extends React.Component {
    static navigationOptions = {
        title: 'UPDATE FREQUENCY',
        style: {
            display: 'flex',
            flexDirection: 'row',
            backgroundColor: "#FFD700"
        }
    };

    constructor(props) {
        super(props);
        // this.toggle= this.toggle.bind(this);
        this.state = {
            ischecked: true,
            data: '',
            time: 0
        }
    }
    onChangeCheck() {
        this.setState({
            ischecked: !this.state.ischecked
        });

    }
    onPressDropdownData(data) {
        this.setState({
            data: data
        });

    }

    onPressDropdownTime(time) {

        this.setState({
            time: time
        });
    }

    render()

    {

        const data = [{
            value: '3 Hours'
        }, {
            value: '6 Hours'
        }, {
            value: '12 Hours'
        }, {
            value: 'Daily'
        }];

        const time = [{
            value: '6 AM'
        }, {
            value: '00:00 HRS'
        }];

        return ( < View style = {
                styles.container
            } >

            < Text style = {
                styles.writeup
            } > Use this page to select how many updates you would like to receive at once. < /Text>

        <View style={StyleSheet.create({flex:1})}>


        <CheckBox style={styles.one}
            center
            title="Receive Simultaneously"
            checkedIcon="dot-circle-o"
            uncheckedIcon="circle-o"
            checked={this.state.ischecked}
            value={this.state.ischecked}
            onPress={this.onChangeCheck.bind(this)}
          / >

            < Dropdown label = '# Updates to Receive'
            data = {
                data
            }
            onPress = {
                this.onPressDropdownData(this.data).bind(this)
            }
            />


        <Dropdown
        label='Delay Between Updates'
        data={time}
        onPress={this.onPressDropdownData(this.data).bind(this)}
        / >

            < TouchableOpacity style = {
                styles.adsense
            }
            onPress = {
                () = > {
                    alert('Receive simultaneously : ' + this.state.ischecked + '\n' + 'No. of updates to receive : ' + this.state.data + '\n' + 'Delay between updates : ' + this.state.time);
                }
            } > < Text > Show recorded inputs < /Text>
        </TouchableOpacity >

            < /View>

        <TouchableOpacity style={styles.adsense}>
        <Text>Adsense Ad</Text > < /TouchableOpacity>


      </View >
        );
    }

}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        display: 'flex',
        flexDirection: 'column'
    },

    writeup: {
        flex: 0.3,
        backgroundColor: '#FFE4B5',
        justifyContent: 'center',
        alignItems: 'center',
        padding: 8
    },
    adsense: {
        flex: 0.55,
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: '#778899',
    },

});

标签: react-nativeexpo

解决方案


错误是你不能这样做:this.onPressDropdownData(this.data).bind(this).

首先,我向您推荐使用箭头函数来创建类方法。箭头函数可避免您进行显式绑定。

为了解决您的问题:

  • 如果你想在绑定时传递额外的参数,看这个:传递额外的参数来绑定?.

  • 如果要访问在data中创建的变量render,则只能使用变量的名称访问,保留字this用于属于该类的方法或属性。我的意思是,只有data,不是this.data

有关箭头功能的阅读链接:


推荐阅读