React Native TypeScript点击Text组件无法获取文本内容的问题求助

在React Native里，GestureResponderEvent和Web端的DOM事件逻辑不同，没法直接通过target或currentTarget拿到Text组件的文本内容——你看到的复杂对象其实是原生组件的节点句柄，并不包含文本信息。下面是几种简单可行的解决方法：

方法一：直接传递文本作为事件参数 #

这是最直接高效的方式，把Text的文本内容直接传给点击处理函数：

import { GestureResponderEvent, StyleSheet, Text, View } from "react-native";
import React, { useState } from "react";
import Card from "../../components/card/Card";
import ChooseLotteryNumber from "../../components/choose_lottery_number/ChooseLotteryNumber";

const CreateUser = () => {
  const [selectedNumbers, setSelectedNumbers] = useState<number[]>([]);
 
  // 修改函数参数，直接接收文本内容
  const onSelectNumbers = (text: string)=>{
    console.log(text);
  };

  return (
    <View>
      <Card>
        <View>
          {/* 调用onPress时直接传入文本 */}
          <Text onPress={() => onSelectNumbers("choose numbers!")}>choose numbers!</Text>
        </View>
        <View style={styles.number_container}>
        </View>
      </Card>
    </View>
  );
};

export default CreateUser;

const styles = StyleSheet.create({
  number_container: {
    flexDirection: "row",
    flexWrap: "wrap",
    justifyContent: "center",
    backgroundColor: "white",
    borderRadius: 10,
  },
  number: {
    fontSize: 24,
    margin: 6,
    borderWidth: 1,
    borderRadius: 5,
    textAlign: "center",
    width: 35,
  },
});

方法二：动态文本场景下传递变量 #

如果文本内容是动态的（比如来自state、props或其他变量），直接传递对应的变量即可：

const CreateUser = () => {
  const [selectedNumbers, setSelectedNumbers] = useState<number[]>([]);
  // 动态文本变量
  const buttonText = "choose numbers!";
 
  const onSelectNumbers = (text: string)=>{
    console.log(text);
  };

  return (
    <View>
      <Card>
        <View>
          <Text onPress={() => onSelectNumbers(buttonText)}>{buttonText}</Text>
        </View>
        <View style={styles.number_container}>
        </View>
      </Card>
    </View>
  );
};

方法三：通过ref获取（不推荐，仅作参考） #

如果一定要通过组件实例获取文本，可以使用useRef访问Text组件的props，但这种方式没必要，不如直接传参数简洁：

import { GestureResponderEvent, StyleSheet, Text, View } from "react-native";
import React, { useState, useRef } from "react";
import Card from "../../components/card/Card";
import ChooseLotteryNumber from "../../components/choose_lottery_number/ChooseLotteryNumber";

const CreateUser = () => {
  const [selectedNumbers, setSelectedNumbers] = useState<number[]>([]);
  const textRef = useRef<Text>(null);
 
  const onSelectNumbers = ()=>{
    if (textRef.current) {
      console.log(textRef.current.props.children);
    }
  };

  return (
    <View>
      <Card>
        <View>
          <Text ref={textRef} onPress={onSelectNumbers}>choose numbers!</Text>
        </View>
        <View style={styles.number_container}>
        </View>
      </Card>
    </View>
  );
};

export default CreateUser;

为什么原方法行不通？ #

React Native的GestureResponderEvent中的target和currentTarget对应的是原生平台的组件节点句柄，并非Web端的DOM元素，所以没有textContent这类属性可以直接获取文本。直接传递文本参数是React Native中处理这类需求的标准做法。

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