onPress参数不变

Question

我想显示一个项目列表，当我单击每个项目时，它会提醒我它的值。

_onPressButton(i) { 
    Alert.alert('You tapped the button number ' + i)
}

_renderBlockLebel = (number) => {
    var items = [];
    for (var i=0; i < number; i++) { 
        items.push(
            <TouchableOpacity onPress={() => this._onPressButton(i)} key={i}>
                <View style={styles.boxItem}>
                    <Text>Level {i}</Text>
                </View>
            </TouchableOpacity>
        );
    }
    return items;
}

render(){
    return(
        <View style={styles.box}>{this._renderBlockLebel(18)}</View>
    );
}

我有18个项目，它显示很好，但当我点击任何项目，它提醒“您点击按钮编号18"，我传递的值是不变的。

我的密码怎么了？我是新来的反应本地人。

Answer 1

当您按标签时，i的值已达到number (这是您的情况下的18 )。您需要在每次迭代中保留i的值。将_onPressButton声明更改为

_onPressButton = (i) => () => { 
    Alert.alert('You tapped the button number ' + i)
}

还将onPress处理程序更改为

<TouchableOpacity onPress={this._onPressButton(i)} key={i}>

看一看闭锁。

希望这能帮上忙！

Answer 2

我试着考虑一个变量，它起作用了。

import * as React from 'react';
import { Alert, TouchableOpacity, Text, View, StyleSheet } from 'react-native';
import { Constants } from 'expo';

export default class App extends React.Component {
  _onPressButton (n) {
    Alert.alert('You tapped the button number ' + n);
  }

  _renderBlockLebel = number => {
    var items = [];
    for (var i = 0; i < number; i++) {
      const n = i;
      items.push(
        <TouchableOpacity onPress={() => this._onPressButton(n)} key={i}>
          <View style={styles.boxItem}>
            <Text>Level {i}</Text>
          </View>
        </TouchableOpacity>
      );
    }
    return items;
  };

  render() {
    return (
      <View style={styles.container}>
        <View style={styles.box}>{this._renderBlockLebel(18)}</View>
      </View>
    );
  }
}

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

https://snack.expo.io/@gasparteixeira/alert-number

​

​