如何在React Native中设置Onpress On Textinput

Question

我正在开发一款React Native应用，希望在按下文本输入框后调用日期选择器，在选择日期后将其显示在文本输入框上。

- Savad

---

不确定是否理解，如果用户无法在文本输入框中输入文本，为什么不使用按钮？ - MaximumLasagna

这是一个特殊情况。 - Savad

你是否使用了任何第三方工具来打开日期选择器？@StvNewsKaipamangalam - Patel Dhara

Answer 1

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

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

- Kuldeep Saxena

---

这对我很有用，因为我也需要禁用TextInput，所以只有这个答案有效，谢谢！ - elblogdelbeto

Answer 2

您不能直接调用 TextInput 的 onPress。您只能使用onFocus，当您按下输入框以将光标移到那里时，会调用它。 如果您的用例不需要，请勿关注 onBlur。如有可能，请在onFocus内处理关闭。

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

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

- Naveen Vignesh

Answer 3

你可以通过提供readonly属性使文本输入字段变为只读。

 editable={false}
 pointerEvents="none"

将prop添加到TextInput中。

- Ram Rana

Answer 4

你需要使用TextInput的onFocus和onBlur。最初的回答是这样的。

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

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

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

- Samitha Nanayakkara

Answer 5

将TextInput包装在View中，并设置pointerEvents="none"，然后将该视图与TouchableOpacity或任何其他可触摸组件一起包装。请参见下面的示例！

<TouchableOpacity
  onPress={() => {
                    alert('hello');
                }}>
                <View pointerEvents="none">
                    <TextInput
                        onChange={() => {}}
                        value={''}
                        placeholder={waterMark}
                        editable={!isDisabled}
                        selectTextOnFocus={!isDisabled}
                    />
                </View>
</TouchableOpacity>

- Lovekush Vishwakarma