How to apply click event on TextInput in react native

问题

Hi I am using TextInput in my react native application. I want to open Date Dialog on clicking on TextInput. I didn't find any work around to apply click event on TextInput. Does anyone know how to do this in react native ?

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

回答1:

You can use the onFocus prop to know when the user has selected that TextInput.

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

Unless you have autofocus={true}, this will work. You can find more documentation about onFocus here:

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

回答2:

Add pointerEvents="none" on TextInput

Example

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

回答3:

One more way to perform TextInput click

TextInput onTouchStart

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

来源：https://stackoverflow.com/questions/45781513/how-to-apply-click-event-on-textinput-in-react-native