undefined不是TouchableOpacity onPress中的函数

Question

这个问题几乎与此相似：可触摸不透明度 onpress 函数未定义（不是函数） React Native

但问题是，尽管我已经绑定了函数，但我还是收到了错误。这是我的可触摸不透明度组件：

<TouchableOpacity style={styles.eachChannelViewStyle}  onPress={() => this.setModalVisible(true)}>
    {item.item.thumbnail ?
    <Image style={styles.everyVideoChannelThumbnailStyle} source={{uri: item.item.thumbnail}} />
   : <ActivityIndicator style= {styles.loadingButton} size="large" color="#0000ff" />}
    <Text numberOfLines={2} style={styles.everyVideoChannelVideoNameStyle}>
      {item.item.title}
    </Text>
  </TouchableOpacity>

这是我的setModalVisible函数：

  setModalVisible(visible) {
    console.error(" I am in set modal section ")
    this.setState({youtubeModalVisible: visible});
  }

另外，我在构造函数中绑定了函数，如下所示：

this.setModalVisible = this.setModalVisible.bind(this);

但是，我仍然遇到相同的错误，即未定义不是函数。关于此错误的任何帮助？

Answer 1

render method 和custom method必须在同一范围内。在下面的代码中，我已经演示了相同的内容。我希望你能相应地修改你的代码，因为我假设你得到了要点:)

class Demo extends Component {
  onButtonPress() {
    console.log("click");
  }
  render() {
    return (
        <View>
          <TouchableOpacity onPress={this.onButtonPress.bind(this)}>
            <Text> Click Me </Text>
          </TouchableOpacity >
       <View>
    );
  }
}

或者constructor中的绑定方法也可以工作

class Demo extends Component {
  constructor(props){
    super(props);
    this.onButtonPress= this.onButtonPress.bind(this);
  }
  onButtonPress() {
    console.log("click");
  }
  render() {
    return (
        <View>
          <TouchableOpacity onPress={this.onButtonPress()}>
            <Text> Click Me </Text>
          </TouchableOpacity >
       <View>
    );
  }
}

Answer 2

我不确定这是否有帮助，但我以这种方式编写函数并且没有遇到此问题。

如果我是你，我会尝试在你声明它的地方绑定函数。

 setModalVisible = (visible) => {
    this.setState({ youtubeModalVisible: visible });
 }

如果这样做，则不必在构造函数中绑定。

constructor(props) {
    ...
    // Comment this out to see it will still bind.
    // this.setModalVisible = this.setModalVisible.bind(this);
    ...
}

最后，如果此函数仅将模态的状态设置为可见，则可能需要删除参数并以这种方式传递它。

<TouchableOpacity style={styles.eachChannelViewStyle}  onPress={this.setModalVisible}>
  ...
</TouchableOpacity>
// Refactored function declaration would look like this
 setModalVisible = () => {
    this.setState({ youtubeModalVisible: true });
 }