Question

我希望能够使用道具onPress在TouchableHighLight组件中检索Text组件的内容。但是，我做不到。

我应该怎么做？

<TouchableHighlight style={styles.quickReply} onPress={this.onPress}>
  <Text>Yes</Text>
</TouchableHighlight>

先谢谢您

Answer 1

由于已经知道了文本的值（已设置），您可能应该将其传递给onPress函数。

这意味着您可以执行以下操作：

onPress = (text) => () => {
  console.log(text);
  // do all the things that should happen when the text is pressed
}

然后在您的TouchableHighlight中传递值。该值可以来自状态，也可以像上面一样硬编码。

<TouchableHighlight style={styles.quickReply} onPress={this.onPress('Yes')}>
  <Text>Yes</Text>
</TouchableHighlight>

Answer 2

让我们面对一个例子：您正在处理数组中的快速答复。

  state = {
    quickReplies: ['Reply 1', 'Reply 2', 'Reply 3', 'Reply 4'],
  };

您可以像这样渲染它们：

{this.state.quickReplies.map(reply => 
  <TouchableHighlight style={styles.quickReply} onPress={()=>this.onPress(reply)}>
    <Text>{reply}</Text>
  </TouchableHighlight>
)}

其中onPress函数可能是：

  onPress = (reply) => {
    console.log(reply);
  }

还请注意，来自 react-native 的<Text>也接受onPress道具。您可以轻松使用它，而无需将每个元素包装在<TouchableHighlight>

中

从文本组件获取文本值

2 个答案: