Question

嗨，这是我第一次用javascript开发应用程序并反应原生，这是一个noob问题。如何在_getData函数中调用__onRegionChangeComplete函数？我试过this._getData()显示

错误：undefined不是一个函数（评估＆＃39; this._getData（）＆＃39;）＆＃39;）。

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 Component更改为createclass并在每个函数后添加逗号来解决此问题。阅读有关它们的简要介绍是createclass具有自动绑定功能，而扩展组件不会为您执行此操作，因此您必须自己绑定它们。

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;

Answer 3

这个例子确实很有帮助

export default class Setup extends Component {
  _onPressButton() {
    Alert.alert('You tapped the button!')
  }

  render() {
    return (
      <View style={styles.container}>
      <View>
        <Text h1>Login</Text>
        </View>
        <View>
        <Button
          onPress={this._onPressButton}
          title="Learn More"
          color="#841584"
          accessibilityLabel="Learn more about this purple button"
        />
        </View>
      </View>
    );
  }
}

Answer 4

你应该解决一个可能导致错误的语法注释：在类的每个方法的close括号后面添加一个逗号。尝试并编辑您的帖子，看看是否有任何错误。（对不起，我把它放在评论中，但没有足够的声誉！）

Answer 5

您必须使用ES6来执行功能，否则它将无法正常工作，尤其是对于更高版本（例如0.59）而言。在类中调用函数时，以下代码应该可以工作。通过使用this._onRegionChangeComplete

，可以正确调用该函数

  constructor(props) { 
  super(props); 
  this.state = {sliderValue: 15,}
  }

  var Map = React.createClass({
     render(){
     return (
     <View style={styles.container}>
        <MapView style={styles.map} 
         showsUserLocation={true}
         rotateEnabled={false}
         onRegionChangeComplete={this._onRegionChangeComplete}
    />
  </View>
    );
 },
  _onRegionChangeComplete=()=>
    {
        //Your code here. you can use this.variable if you want to use variables from 
        //your constructor(props) { super(props); this.state = {sliderValue: 15,} }

       //Example passing variable
       let Myvalue = this.state.sliderValue;

     }

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

5 个答案: