Question

问题几乎与此类似： Action Delegate

但是问题是，尽管我已经绑定了函数，但是却遇到了错误。这是我的TouchableOpacity组件：

<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);

但是，我仍然遇到相同的错误，即undefined不是函数。关于此错误有什么帮助吗？

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 });
 }

undefined不是TouchableOpacity onPress中的函数

2 个答案: