Question

我正在尝试从数组生成一系列按钮。我有以下代码

render: function() {
    var locations = this.state.campus.map(function (item){
        var that = this;
        return(
            <TouchableHighlight style={styles.button}
                underlayColor='#dddddd'
                onPress={()=>this.buttonPress("this")}>
                <Text style={styles.buttonText}>{item}</Text>
            </TouchableHighlight>
        )
    });

    return (
        <View style={styles.container}>
            <Text style={styles.welcome}>Campus</Text>
            <View style={styles.flowDown}>
                {locations}
            </View>
            <TouchableHighlight style={styles.button}
                underlayColor='#dddddd'
                onPress={()=>this.buttonPress("this")}>
                <Text style={styles.buttonText}>'Hello'</Text>
            </TouchableHighlight>

        </View>
    );
}

这样渲染效果很好，底部的按钮也很完美。但是，地图功能中生成的按钮会在按下时产生错误。我已经尝试了那个= this并使用bind（this）/ bind（that）但我仍然收到错误。

是否可以通过这种方式生成按钮？我不想使用ListView，因为它会生成自己的整个屏幕显示。

Answer 1

试试这个：

render: function() {
    var that = this;
    var locations = this.state.campus.map(function (item){
        return(
            <TouchableHighlight style={styles.button}
                underlayColor='#dddddd'
                onPress={()=>that.buttonPress("this")}>
                <Text style={styles.buttonText}>{item}</Text>
            </TouchableHighlight>
        )
    });

    return (
        <View style={styles.container}>
            <Text style={styles.welcome}>Campus</Text>
            <View style={styles.flowDown}>
                {locations}
            </View>
            <TouchableHighlight style={styles.button}
                underlayColor='#dddddd'
                onPress={()=>this.buttonPress("this")}>
                <Text style={styles.buttonText}>'Hello'</Text>
            </TouchableHighlight>

        </View>
    );
}

React Native未在对象中定义

1 个答案: