React Native中TouchableOpacity的onPress无法获取组件id显示undefined求助

嘿，我来帮你搞定这个问题！你现在的代码里有两个关键问题导致点击时返回undefined：

• 你给TouchableOpacity设置的id={i}并不是组件的props（React Native组件本身也没有内置的id props），而且你在onPress里调用的this.props.id是当前组件的props，和循环里给按钮加的id完全不沾边。
• 另外你的return {rows}写法有误，React组件的render方法必须返回一个React元素，不能直接返回对象。

下面给你两种简单可行的解决方案：

方案一：直接在回调中捕获循环索引 #

这是最直接的方式，在创建TouchableOpacity时，把当前的循环索引i直接传给onPress的回调函数：

render() { 
  var rows = []; 
  var i = 0; 
  while(i<5){
    rows.push(
      <TouchableOpacity 
        key={i} // 务必添加key属性，React列表渲染要求必须有唯一key
        activeOpacity={0.9} 
        onPress={() => alert(i)}> 
        <View>
          <Text>按钮{i}</Text> {/* 可以加个文本方便区分按钮 */}
        </View> 
      </TouchableOpacity>
    ); 
    i++; 
  } 
  // 用View包裹所有按钮，返回合法的React元素
  return <View>{rows}</View>; 
}

方案二：用map函数生成列表（更符合React风格） #

如果习惯用数组的map方法来生成列表，代码会更简洁，同样可以直接捕获当前索引：

render() { 
  // 生成包含5个元素的数组，用index作为按钮标识
  const rows = Array.from({length: 5}, (_, index) => (
    <TouchableOpacity 
      key={index}
      activeOpacity={0.9} 
      onPress={() => alert(index)}> 
      <View>
        <Text>按钮{index}</Text>
      </View> 
    </TouchableOpacity>
  ));
  
  return <View>{rows}</View>; 
}

额外提醒 #

如果之后你需要传递的不只是索引，而是更复杂的数据（比如从接口获取的列表项），可以直接把整个数据项传给回调，比如：

// 假设你有一个数据数组
const data = [{id: 1, name: "按钮1"}, {id: 2, name: "按钮2"}];

// 在map中直接传递item
const rows = data.map(item => (
  <TouchableOpacity 
    key={item.id}
    activeOpacity={0.9} 
    onPress={() => alert(item.id)}> 
    <View>
      <Text>{item.name}</Text>
    </View> 
  </TouchableOpacity>
));

这样点击时就能准确拿到对应按钮的标识啦！

内容的提问来源于stack exchange，提问作者smcroissant