如何在 react-native 中调用组件 onPress TouchableOpacity

Question

我正在使用 react-native 的 TouchableOpacity。代码是：

<TouchableOpacity onPress={onPress}>
    <Text style={styles.supplementItem}>{item.item}</Text>
</TouchableOpacity>

OnPress 函数在哪里：

 const onPress = () => (
  // eslint-disable-next-line no-sequences
  <Text style={styles.supplementItem}>Hello</Text>
  this.setState({tempKey: tempKey + 1})
);

我看了看：this question 并尝试做喜欢它。但这不起作用。我将状态设置如下：

constructor(props) {
super(props);
this.state = {
  tempKey: 0,
};

}

请帮助我做错了什么。

Answer 1

您提到的问题是使用基于函数的组件，而您正在使用基于类的组件，因为您展示了证明这一点的 costructor 部分。

所以onPress在你的情况下必须是那个类中的一个方法，所以你不需要const之前的关键字，你需要以这种方式调用它； this.onPress

简而言之，你的整个组件应该是这样的；

import React from 'react';
import {Text, TouchableOpacity, View} from 'react-native';

class YourComp extends React.Component {
    constructor(props) {
    super(props);
    this.state = {
      tempKey: 0,
      show: false
    };
    
    }
    onPress = () => {
      // eslint-disable-next-line no-sequences
      this.setState(prevState => ({tempKey: prevState.tempKey + 1}))
    };

render() {
   return (
<View>
    <TouchableOpacity style={{height: 100, justifyContent: 'center', alignItems: 'center'}} onPress={() => this.onPress()}>
        <Text>Hello (item.item in your case)</Text>
    </TouchableOpacity>

      <Text key={this.state.tempKey.toString()}>Hello {this.state.tempKey}</Text>
</View>
  )


}


}
export default YourComp;

如果你想有条件地显示某些组件；

this.state = {
      ...,
     show: false

}

然后在onPress方法中；

this.setState(prevState => ({show: !prevState.show})) // this will make <Text /> to toggle the modal when clicked.

然后在render方法中；

<Text>
  {this.state.show && (
    <YourNewComponent />

) || null}


</Text>