Question

我正在尝试在组件内部调用方法。更详细地说，此组件显示一个垂直页面滑动器，我需要一个按钮“转到下一张幻灯片”。我正在尝试使用ref，但收到错误this.refs.verticalViewPager is undefined。我尝试打印this.refs，它也是未定义的。

class App extends Component {
  nextPage() {
        this.refs.verticalViewPager.nextPage()
    }

  render () {
    return (<VerticalViewPager ref="verticalViewPager">
     <View>
      <Text>slide one</Text>
      <Button title={"click to go to the next slide"}  onPress={this.nextPage}  />
    </View>
    <View>
      <Text>slide two</Text>
    </View>
</VerticalViewPager>)
  }
}

https://github.com/gy-chen/react_native_vertical_view_pager

Answer 1

尝试使用函数而不是字符串，这可能是因为您没有使用箭头函数或绑定nextPage方法：

class App extends Component {
  nextPage = () => {
        this._verticalViewPager.nextPage()
    }

  render () {
    return (<VerticalViewPager ref={component => this._verticalViewPager = component}>
     <View>
      <Text>slide one</Text>
      <Button title={"click to go to the next slide"}  onPress={this.nextPage}  />
    </View>
    <View>
      <Text>slide two</Text>
    </View>
</VerticalViewPager>)
  }
}

如何使用参考连接

1 个答案: