React Native中如何在TouchableOpacity onPress时传递自定义值

你当前写法的核心问题是直接执行了handlePress函数：onPress={handlePress("value1")}会在组件渲染时立刻调用函数，而不是点击按钮时触发，自然达不到预期效果。另外注意你的代码里Viev是拼写错误，要改成View。

下面是几种可行的实现方式：

方式一：箭头函数包裹（最直观） #

用箭头函数把传值逻辑包起来，点击时才执行handlePress：

const handlePress = (value) => {
    console.log(value);
}

return (
    <View>
      <TouchableOpacity onPress={() => handlePress("value1")}>
          <Text>ButtonText</Text>
      </TouchableOpacity>

      <TouchableOpacity onPress={() => handlePress("value2")}>
          <Text>ButtonText</Text>
      </TouchableOpacity>
    </View>
)

方式二：通过组件属性+事件对象获取（类似Web端data属性思路） #

给TouchableOpacity添加自定义属性，在事件回调里通过event.currentTarget.props获取：

const handlePress = (event) => {
    const buttonValue = event.currentTarget.props.someValue;
    console.log(buttonValue);
}

return (
    <View>
      <TouchableOpacity someValue="value1" onPress={handlePress}>
          <Text>ButtonText</Text>
      </TouchableOpacity>

      <TouchableOpacity someValue="value2" onPress={handlePress}>
          <Text>ButtonText</Text>
      </TouchableOpacity>
    </View>
)

方式三：函数绑定（适合需要性能优化的场景） #

用bind提前绑定参数，或者结合useCallback避免每次渲染创建新函数：

import { useCallback } from 'react';

// 用useCallback缓存函数，避免重复创建
const handlePress = useCallback((value) => {
    console.log(value);
}, []);

return (
    <View>
      <TouchableOpacity onPress={handlePress.bind(null, "value1")}>
          <Text>ButtonText</Text>
      </TouchableOpacity>

      <TouchableOpacity onPress={handlePress.bind(null, "value2")}>
          <Text>ButtonText</Text>
      </TouchableOpacity>
    </View>
)

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