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

【问题标题】：how to setup Onpress On Textinput in react-native如何在 react-native 中设置 Onpress On Textinput
【发布时间】：2019-07-09 11:53:24
【问题描述】：

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

【问题讨论】：

不太明白，如果用户不能在文本输入中输入文本，为什么不用按钮呢？
这是个特例
您是否使用任何第三方打开 DatePicker？ @StvNewsKaipamangalam

标签： react-native textinput onpress

【解决方案1】：

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

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

【讨论】：

这对我有用，因为我还需要它来禁用 TextInput，所以只有这个答案有效，谢谢！

【解决方案2】：

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

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

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

【讨论】：

【解决方案3】：

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

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

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

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

【讨论】：

【解决方案4】：

您可以通过提供使文本输入字段只读

 editable={false}
 pointerEvents="none"

属性到 TextInput。

【讨论】：