Question

我想将涉及复选框选择，下拉菜单选择和其他所有内容的输入记录到警报框中。我在将下拉选择和复选框选择捕获到一个状态并将所有输入的详细信息进一步放入警报框中时遇到麻烦。

下面是代码：

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',
    },

});

Answer 1

错误是您无法执行此操作：this.onPressDropdownData(this.data).bind(this)。

首先，我建议您使用箭头函数创建类方法。箭头功能可避免您进行显式绑定。

为解决您的问题：

如果要在绑定时传递其他参数，请查看：Pass additional parameters to bind?。
如果要访问在data中创建的render变量，则仅使用变量名进行访问，保留字this用于方法或属于该类的属性。我的意思是，只有data，而不是this.data。

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

TypeError：TypeError：未定义不是对象（评估“ this.onPressDropdownData（this.data）.bind”）

1 个答案: