Question

我对reactjs很新。目前正在使用expo.io开发使用ReactJS native的移动应用程序。在我的项目中，我使用webView来显示内容。它工作正常。但是当我尝试实现goBack（）时，我遇到了问题。

我遵循的例子： https://blog.defining.tech/adding-a-back-button-for-react-native-webview-4a6fa9cd0b0

由于this.refs已折旧，我尝试将其更改为createRef（）另一个参考。我跟着说： https://reactjs.org/docs/refs-and-the-dom.html#adding-a-ref-to-a-class-component

执行goBack（）时，'未定义不是对象'流动。

我可以知道这方面的解决方案吗？

这是我的代码：

enter code here
import React from 'react';
import {
  StyleSheet,
  Text,
  View,
  TouchableOpacity,
  WebView
} from 'react-native';

export default class App extends React.Component {

  constructor(props) {
    super(props);
    this.webRef = React.createRef();     
    this.state = { canGoBack: false };
  }

  render() {
    return (
      <View style={styles.container}>
        <WebView
          ref={this.webRef}
          style={{flex: 1}}
          onNavigationStateChange=
            {this.onNavigationStateChange.bind(this)}
          source={{uri: 'http://www.google.com'}}
          /> 
          <View style={styles.bottombar}>
          <TouchableOpacity
            disabled={!this.state.canGoBack}
            onPress={this.onBack.bind(this)}
            >
            <Text style={this.state.canGoBack ? styles.topbarText : styles.topbarTextDisabled}>Go Back</Text>
          </TouchableOpacity>
        </View>
      </View>
    );
  }

  onBack() {
    // error: undefined is not an object 
    this.webRef.current.goBack();
  }


  onNavigationStateChange(navState) {
    this.setState({
      canGoBack: navState.canGoBack
    });
  }
}

Answer 1

It's not the ref is undefined but this.webRef.current is undefined.

You can just use this.webRef.goBack()

React js createRef（）返回undefined

1 个答案: