React Native新手求教：点击TouchableOpacity如何获取其key与label属性值？

嘿，作为React Native新手碰到这个问题太正常啦！我来一步步帮你搞定怎么点击TouchableOpacity获取对应的key和label值～

首先得说清楚：你原来的写法有两个小问题：一是TouchableOpacity本身不支持label（你还拼写错成lable啦）和直接通过this.key获取key的方式；二是key是React列表元素的特殊标识，不能直接通过组件实例拿到。

最直接靠谱的解决方法是把每个选项的key和label直接作为参数传给点击回调函数，具体实现看下面的代码：

1. 先准备你的选项数据 #

假设你有一组选项数组，把key和label都存在里面：

const options = [
  { key: 12, label: '12' },
  { key: 13, label: '13' },
  { key: 14, label: '14' },
  // 可以继续加更多选项
];

2. 渲染TouchableOpacity列表 #

遍历选项数组，把每个选项的key和label直接传给onPress的回调：

{options.map(option => (
  <TouchableOpacity 
    key={option.key}  // 这里的key是React列表要求的标识，没问题
    style={{ margin: 3 }}
    // 直接把当前选项的key和label作为参数传入回调
    onPress={() => this._helloXP(option.key, option.label)}
  >
    {/* 别忘了在TouchableOpacity里加个Text显示选项内容哦 */}
    <Text>{option.label}</Text>
  </TouchableOpacity>
))}

3. 定义处理点击的方法 #

在你的组件里实现_helloXP方法，就能拿到点击的key和label了：

_helloXP = (selectedKey, selectedLabel) => {
  console.log('选中的key:', selectedKey);
  console.log('选中的label:', selectedLabel);
  // 这里就可以做你需要的逻辑啦，比如更新组件状态、提交数据等等
};

如果是函数组件的写法（现在更常用） #

要是你用的是函数组件，写法类似，只是不用this：

const CustomSelector = () => {
  const handleSelect = (key, label) => {
    console.log('选中的key:', key, '选中的label:', label);
  };

  const options = [
    { key: 12, label: '12' },
    { key: 13, label: '13' }
  ];

  return (
    <View>
      {options.map(option => (
        <TouchableOpacity 
          key={option.key}
          style={{ margin: 3, padding: 8, backgroundColor: '#f0f0f0' }}
          onPress={() => handleSelect(option.key, option.label)}
        >
          <Text>{option.label}</Text>
        </TouchableOpacity>
      ))}
    </View>
  );
};

为啥原来的方法不行？ #

• key是React用来跟踪列表元素变化的特殊属性，不会被传递给组件的props，所以没法通过this.key获取；
• 你自定义的lable（正确拼写是label）不是TouchableOpacity的标准属性，组件不会接收这个属性，自然也拿不到。

直接把选项数据作为参数传给回调，是React里处理这类场景的常规操作，简单又不容易出错～

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