如何在 react-native 中设置 Onpress On Textinput

Question

我正在开发一个基于 React Native 的应用程序。我想在按下文本输入时调用日期选择器，在选择日期后它应该显示在文本输入

Answer 1

你要做的就是使用TextInput的onFocus和onBlur。

<TextInput 
    onFocus={this.onFocus}
    onBlur={this.onBlur}
/>

onFocus = () => {
 // Open date picker
}

onBlur = () => {
 // Close date picker and add value to textinput
}

Answer 2

您不能为 TextInput 显式调用 onPress。你只能用。 onFocus 当您按下输入框将光标移动到那里时将被调用。 无需关注 onBlur，因为您的用例不需要。。如果可能，在 onFocus 内处理关闭。

onFocus = () => {
  // do something
}

render() {
  <TextInput onFocus={onFocus} />
}

Answer 3

将 TextInput 包装到视图中并将 pointerEvents 设置为 none。现在您可以使用 react-native 中的 Pressable 组件来监听 onpress 事件。

<Pressable onPress={() => alert('Hi!')}>
 <View pointerEvents="none">
  <TextInput />
 </View>
</Pressable>

Answer 4

您可以通过提供

将文本输入字段设置为只读

 editable={false}
 pointerEvents="none"

支持 TextInput。

如何在 react-native 中设置 Onpress On Textinput

how to setup Onpress On Textinput in react-native

textinput

react-native

onpress