如何让 onPress 在 TextInput 内的 React Native Text 元素上触发？

Posted 2023-04-15

【中文标题】如何让 onPress 在 TextInput 内的 React Native Text 元素上触发？

【英文标题】：How can I get onPress to fire on a React Native Text element inside a TextInput?

【发布时间】：2021-04-30 00:53:29

【问题描述】：

出于样式的目的，我有多个 Text 元素作为 TextInput 的子元素。我希望用户点击它们以激活模式（该 Text 元素独有），但是我无法让 onPress 事件起作用。这是一个简化的例子：

<TextInput>
  <Text onPress=() => console.log(1)>touch me</Text>
</TextInput>

“触摸我”是可编辑的，正如您在 TextInput 中所期望的那样，但 onPress 在被点击时不会触发。

有没有办法让这个设置按我的意愿工作？

【问题讨论】：

所以你的意思是当你点击文本元素时 coonsole.log 不打印 1？

@Sakshi 没错

【参考方案1】：

您可以将其包装在 TouchableOpacity 中：

const [value, setValue] = useState('Press me');

return <TouchableOpacity onPress=() => alert("Hello world")>
  <TextInput
    value=value
  />
</TouchableOpacity>

【讨论】：

感谢您的回答。对不起，我应该更清楚，但我希望每个 Text 元素的模态对于该特定元素都是唯一的。如果有办法引用被触摸的特定子元素，那么它就可以工作。