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

【问题标题】：How to call function in a function on react-native?如何在 react-native 的函数中调用函数？
【发布时间】：2015-09-01 14:13:07
【问题描述】：

您好，这是我第一次使用 javascript 和 react-native 开发应用程序，这是一个菜鸟问题。如何在__onRegionChangeComplete 函数中调用_getData 函数？我试过this._getData()它显示了

错误：未定义不是函数（评估'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;

【问题讨论】：

标签： javascript react-native

【解决方案1】：

我给你举个例子，希望对你有帮助。

1.当然，你可以使用 ES5 feature(createClass) 代替 ES6(extends class) 方法来解决这个绑定问题。

2.你可以继续使用 ES6，只是要小心绑定 this。例如在我的组件中

_func1(){
    ...
}

_func2(){
  this._func1()
}

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

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

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

希望对你有帮助。

【讨论】：

【解决方案2】：

通过将 extends 组件更改为 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;

【讨论】：

任何人都可以用“新”方式（ES6，见上面的评论）更新这个吗？我有同样的问题，但不想回到“错误”的事情上
我觉得用extends比较好，兼容标准，更多见toddmotto.com/react-create-class-versus-component
Svetter，我相信最初的问题是 'this._getData() 中的 this 指的是函数内部的范围。您可以通过将const that = this; 放在函数之外，然后改用that._getData() 来解决此问题。

【解决方案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>
    );
  }
}

【讨论】：

【解决方案4】：

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

【讨论】：

【解决方案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;

     }

【讨论】：