如何在react-native上的函数中调用函数？

Question

嗨,这是我第一次用javascript和react-native开发应用程序,这是一个noob问题.如何_getData在__onRegionChangeComplete函数中调用函数？我试过this._getData()它

错误:undefined不是函数(evaluation'this._getData()')').

var React = require('react-native');

var {
  StyleSheet,
  Text,
  View,
  Image,
  MapView,
  Component,
} = React;

class Map extends Component {
  render() {
    return (
      <View style={styles.container}>
        <MapView style={styles.map} 
          showsUserLocation={true}
          onRegionChangeComplete={this._onRegionChangeComplete}
        />
      </View>
    );
  }

  _onRegionChangeComplete(region)
  {

  }

  _getData()
  {

  }
}

var styles = StyleSheet.create({
  container:{
    flex: 1
  },
  map: {
    flex: 1,
  },
  image: {
    width: 64,
    height: 64
  }
});

module.exports = Map;

Answer 1

让我给你举个例子,希望它对你有所帮助.

1.当然,您可以使用ES5功能(createClass)代替ES6(扩展类)方法来解决此绑定问题.

2.你可以继续使用ES6,只需要小心绑定它.例如在我的组件中

_func1(){
    ...
}

_func2(){
  this._func1()
}

如果我想在func2中调用_func1(),'this'绑定到_func2本身,当然,那里没有func1().

但是如果我在调用_func2()时将_func2()绑定到组件上下文,问题就会解决.

<subComponent subProp = {this._func2.bind(this)} />

希望它能帮到你.

Answer 2

通过将 extends 组件更改为 createclass 并在每个函数后添加逗号来解决此问题。阅读有关它们的简要介绍是，createclass 具有函数的自动绑定功能，而 extends 组件不会为您执行此操作，因此您必须自己绑定它们。

var React = require('react-native');

var {
  StyleSheet,
  Text,
  View,
  Image,
  MapView,
  Component,
} = React;

var Map = React.createClass({
  render(){
    return (
      <View style={styles.container}>
        <MapView style={styles.map} 
          showsUserLocation={true}
          rotateEnabled={false}
          onRegionChangeComplete={this.onRegionChangeComplete}
        />
      </View>
    );
  },

  onRegionChangeComplete(region) {
    this.getData(region)
  },

  getData(region) {

  },
});

var styles = StyleSheet.create({
  container:{
    flex: 1
  },
  map: {
    flex: 1,
  },
  image: {
    width: 64,
    height: 64
  }
});

module.exports = Map;