onClick() 不会触发 React-Native App 中的函数

Question

In my react-native mobile app I have written a component called Row in row.js that contains a TouchableOpacity with an onClick() event handler. However when the component is clicked the function doesn't run.

The Row component displays some text about a particular film and should run the handlePress() function when clicked:

const Row = props => (
  <TouchableOpacity onClick={() => props.handlePress(props.imdbID)} style={styles.row}>
    <Text>Some text</Text>
  </TouchableOpacity>
)

In a separate app.js file, the handlepress function has been written and is passed to the Row component as a prop. The imdbID variable is also passed to the component from the film object:

handlePress = imdbID => {
  // do something with imdbID
}

<Row handlePress={this.handlePress} {...film} />

Please can someone tell me what I am doing wrong and why the function doesn't run.

Answer 1

If you take a look at the docs , it doesnt have onClick .

You should use onPress .

const Row = props => (
  //          using onPress
  <TouchableOpacity onPress={() => props.handlePress(props.imdbID)} style={styles.row}>
    <Text>Some text</Text>
  </TouchableOpacity>
)

Answer 2

React native does not have onClick for TouchableOpacity . Use onPress instead.

Answer 3

React-Native doesnt provide onClick functionality , it gives onPress instead , so replace onClick with onPress

const Row = props => (
  <TouchableOpacity onPress={() => props.handlePress(props.imdbID)} style={styles.row}>
    <Text>Some text</Text>
  </TouchableOpacity>
)

hope this helps ,feel free for doubts

Answer 4

Use onPress() instead of of onClick()

improved code

const Row = props => (
  <TouchableOpacity onPress={()=> props.handlePress(props.imdbID)} style={styles.row}>
    <Text>Some text</Text>
  </TouchableOpacity>
)

Answer 5

使用 onPress 而不是 onClick 并确保您从 react-native 而不是手势处理程序导入可触摸