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

Question

在我反应过来，本地移动应用我写了一个在row.js称为行组件包含TouchableOpacity用onClick()事件处理程序。 但是，当单击该组件时，该功能不会运行。

Row 组件显示有关特定电影的一些文本，单击时应运行 handlePress() 函数：

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

在单独的 app.js 文件中，handlepress 函数已被编写并作为 prop 传递给 Row 组件。 imdbID 变量也从电影对象传递给组件：

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

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

请有人告诉我我做错了什么以及为什么该功能没有运行。

Answer 1

如果您查看文档，它没有onClick 。

你应该使用onPress 。

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

Answer 2

React Native 没有用于TouchableOpacity onClick 。 请改用onPress 。

Answer 3

React-Native 不提供onClick功能，而是提供onPress ，因此将 onClick 替换为onPress

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

希望这会有所帮助，不要怀疑

Answer 4

使用onPress()而不是onClick()

改进的代码

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

Answer 5

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