React Native中TouchableOpacity绑定onPress报this错怎么解决

你编写的MainModal是函数式组件，this指向组件实例的写法仅适用于ES6 Class定义的类组件，函数组件内部不存在绑定组件实例的this上下文，直接调用this.TouchableOpacity必然会抛出undefined错误。

函数组件不需要通过this访问内部方法或组件实例，直接在组件函数作用域内定义事件处理逻辑，绑定到onPress属性即可。

基础点击事件绑定 #

修正后的可运行代码如下：

import { View, TouchableOpacity, Text } from 'react-native';

function MainModal (){
  // 直接在函数内部定义点击触发的逻辑
  const handleBackPress = () => {
    // 此处写自定义业务逻辑，比如返回上一页、关闭弹窗、修改状态等
    console.log('返回按钮被点击');
  }

  return(
    <>
      <View style={{flexDirection: 'row'}}>
        <TouchableOpacity
          onPress={handleBackPress}
        > 
          <Text>Volver</Text>
        </TouchableOpacity>
      </View>
    </>
  )
}

如果点击逻辑非常简单，也可以直接用内联箭头函数写法，不需要单独抽离处理函数：

<TouchableOpacity onPress={() => console.log('点击触发')}>
  <Text>Volver</Text>
</TouchableOpacity>

注意：不要写成onPress={handleBackPress()}，这种写法会在组件渲染阶段就直接执行函数，而非点击时触发。

获取被点击的TouchableOpacity组件实例 #

如果需要拿到当前点击的组件实例，使用React自带的useRef钩子绑定组件即可，不需要依赖this：

import { useRef } from 'react';
import { View, TouchableOpacity, Text } from 'react-native';

function MainModal (){
  // 创建ref对象存储组件实例
  const backBtnRef = useRef(null);

  const handleBackPress = () => {
    // 通过ref.current即可访问到对应的TouchableOpacity组件实例
    console.log('当前点击的组件实例：', backBtnRef.current);
  }

  return(
    <>
      <View style={{flexDirection: 'row'}}>
        <TouchableOpacity
          ref={backBtnRef}
          onPress={handleBackPress}
        > 
          <Text>Volver</Text>
        </TouchableOpacity>
      </View>
    </>
  )
}

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