从文本组件中获取文本值

Question

我希望能够使用Prop Onpress检索touchableHighlight组件中的文本组件的内容。但是，我做不到。

我应该怎么做？

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

预先感谢您

Answer 1

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

  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 Prop。您可以轻松地使用它，而无需将每个元素包裹在<TouchableHighlight>

Answer 2

您已经知道文本的值，因为您已经设置了文本的值，因此您可能应该将其传递给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>