Question

您好我在我的反应原生应用程序中使用TextInput。我想点击TextInput打开日期对话框。我没有找到任何工作来在TextInput上应用点击事件。有人知道怎么做反应原生吗？

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

Answer 1

您可以使用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 2

在pointerEvents="none"

上添加 TextInput

示例

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

Answer 3

另一种执行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 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"}
    />

如何在textInput中应用click事件

4 个答案: