如何在 React Native 中對 TextInput 應用單擊事件

Question

嗨，我在我的本機應用程序中使用TextInput 。 我想在單擊TextInput打開日期對話框。 我沒有找到任何解決方法來在TextInput上應用點擊事件。 有誰知道如何在 react native 中做到這一點？

<TextInput
  style={{
    height: 40,
    borderColor: "gray",
    borderWidth: 1,
    marginTop: 8
  }}
  underlineColorAndroid="transparent"
  placeholder={strings.schedule_date}
  onKeyPress={keyPress => console.log(keyPress)}
/>

Answer 1

在TextInput上添加pointerEvents="none"

示例

<TouchableOpacity onPress={() => console.log("Pressed")}>
  <TextInput
   pointerEvents="none"
  />
</TouchableOpacity>

Answer 2

執行 TextInput 單擊的另一種方法

TextInput onTouchStart

<TextInput
  style={{
    height: 40,
    borderColor: "gray",
    borderWidth: 1,
    marginTop: 8
  }}
  underlineColorAndroid="transparent"
  placeholder={strings.schedule_date}
  onTouchStart={()=>  console.log("Pressed...")}
  editable={false}
/>

Answer 3

您可以使用onFocus道具了解用戶何時選擇了該TextInput 。

<TextInput
  style={{
    height: 40,
    borderColor: "gray",
    borderWidth: 1,
    marginTop: 8
  }}
  underlineColorAndroid="transparent"
  placeholder={strings.schedule_date}
  onKeyPress={keyPress => console.log(keyPress)}
  onFocus={() => yourCode()}
/>

除非您有autofocus={true} ，否則這將起作用。 您可以在此處找到有關onFocus更多文檔：

https://facebook.github.io/react-native/docs/textinput.html#onfocus

Answer 4

使用onTouchStart屬性在單擊事件上調用任何函數

 <TextInput
      style={{
        height: 40,
        borderColor: "gray",
        borderWidth: 1,
        marginTop: 8
      }}
      underlineColorAndroid="transparent"
      placeholder={strings.schedule_date}
      onKeyPress={keyPress => console.log(keyPress)}
    onTouchStart={() => "Call your function here"}
    />