Javascript 如何在 react-native 的函数中调用函数?

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/32333899/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-23 07:54:22  来源:igfitidea点击:

How to call function in a function on react-native?

javascriptreact-native

提问by phongyewtong

Hi this is my first time developing apps in javascript and react-native, its kind of a noob question. How do I call _getDatafunction in __onRegionChangeCompletefunction? I tried this._getData()it shows

嗨,这是我第一次用 javascript 和 react-native 开发应用程序,这是一个菜鸟问题。如何_getData__onRegionChangeComplete函数中调用函数?我试过this._getData()它显示

error: undefined is not a function(evaluation'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;

采纳答案by phongyewtong

Solve it by changing the extends Component to createclass and adding commas after each function. read a brief introduction about them is that createclass have autobinding for function and extends component does not do that for you, so you have to bind them yourself.

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

回答by jjgg8899

Let me show you an example, and hope it helps you.

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

1.Of course, you can use ES5 feature(createClass) instead of ES6(extends class) method to solve this binding problem.

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

2.You can keep using ES6, just be careful with binding this. For example in my component

2.你可以继续使用ES6,注意绑定this。例如在我的组件中

_func1(){
    ...
}

_func2(){
  this._func1()
}

if I want to call _func1() in func2, 'this' is binded to _func2 itself, of course, there is no func1() there.

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

But if I bind _func2() to component context when I call _func2(), problem will be solved.

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

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

Hope it helps you.

希望对你有帮助。

回答by Vidhyapathi Kandhasamy

This example sure helpful

这个例子肯定有帮助

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>
    );
  }
}

回答by Gibo

You have to use the ES6 way of doing a function or it will not work, specially for higher version such as 0.59. The code below should work, when calling functions within class. You have got it right for calling the function by using this._onRegionChangeComplete,

你必须使用 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;

     }

回答by Hoosh

One grammar note you should address that might be causing errors: add a comma after the close brace for every method in the class. Try that and edit your post to see if any errors. (Sorry I'd put this in a comment but don't have enough reputation!)

您应该解决一个可能导致错误的语法注释:在类中的每个方法的右括号后添加一个逗号。尝试并编辑您的帖子以查看是否有任何错误。(对不起,我会把它放在评论中,但没有足够的声誉!)