javascript - React Native - this.updateTimeState 不是一个函数。尝试在另一个方法中引用类方法？

Question

我希望有人能帮助我，我环顾四周，找不到以我理解的方式解决这个问题的解决方案，我来自Python背景，已经开始再次学习JavaScript，现在是React-Native，所以我当然在做教程!正如你可能想象的那样，这可能会很令人困惑，我正在遵循一个使用“React.createClass()”函数的教程，为了更好地理解我想要的所有内容，请使用“class StopWatchNew extends Component”ES6 方法，对我来说，该方法看起来更整洁，更符合逻辑(让我知道是否有更好的方法，我仍然对此感到困惑)

无论如何，我试图在我的类中引用我的类方法，就像这样；

   static updateTimeState() {
     var startTime = new Date();

     this.setState({
       timeElapsed: new Date() - this.startTime
     });
   };

   handleStartPress() {
     this.updateTimeState()
   };

运行这一行，react-native 会抛出此错误

this.updateTimeState()

this.updateTimeState is not a function. (In 'this.updateTimeState()','this.updateTimeState' is undefined)

我很困惑，因为在 JSX 渲染方法中引用类方法似乎不是问题。我知道 python 与 JS 有很大不同，但这基本上就是我想要做的，如果有帮助的话。

class MyClass(object):
  def myFunc(self):
    pass

  self.myFunc()

感谢任何帮助，谢谢!!

示例代码:

import React, { Component } from 'react';
import formatTime from 'minutes-seconds-milliseconds'
import {
  View,
  Text,
  TouchableHighlight,
  AppRegistry,
  StyleSheet
 } from 'react-native';

 class StopWatchNew extends Component {
  //  Setting the inital state
   constructor(props) {
     super(props);
     this.state = {timeElapsed: null};


     var startTime = new Date();
   }

   border(color) {
     return (
       {
         borderColor: color,
         borderWidth: 4
       }
     )
   };

   startStopButton() {
     return (
       <TouchableHighlight
         underlayColor="grey"
         onPress={this.handleStartPress}>
         <Text>
           Start
         </Text>
       </TouchableHighlight>
     )
   };

   lapButton() {
     return (
       <View>
         <Text>
           Lap
         </Text>
       </View>
     )
   };

   static updateTimeState() {
     var startTime = new Date();

     this.setState({
       timeElapsed: new Date() - this.startTime
     });
   };

   handleStartPress() {
     this.updateTimeState()
   };

   render() {
     return (
       <View style={styles.container}>
         <View style={styles.statusBar}></View>
         <View style={[styles.header, this.border('yellow')]}>
           <View style={[this.border('red'), styles.timerWrapper]}>
             <Text>{this.state.timeElapsed}</Text>
           </View>
           <View style={[this.border('green'), styles.buttonWrapper]}>
             {this.startStopButton()}
             {this.lapButton()}
           </View>
         </View>
         <View style={[styles.footer, this.border('blue')]}>
           <Text>
             I am lap
           </Text>
         </View>
       </View>
     )
   };
 }

 var styles = StyleSheet.create({
   statusBar: {
     flex:0.08,
   },
   container: {
     flex: 1,
     alignItems: 'stretch'
   },
   header: { // Yellow
     flex: 1
   },

   footer: { // Blue
     flex: 1
   },

   timerWrapper: { // Red
     flex: 5,
     justifyContent: 'center',
     alignItems: 'center'

   },

   buttonWrapper: { // Green
     flex: 3,
     flexDirection: 'row',
     justifyContent: 'space-around',
     alignItems: 'center'
   }
 })

 export default StopWatchNew;

Answer 1

您正在使用 this.handleStartPress 作为事件处理程序的回调。由于 React ES6 不会自动绑定(bind)回调，因此在事件处理程序的上下文中调用 this.handleStartPress ，并且 this 并不引用 StopWatchNew 类实例。

在构造函数中手动将 this.handleStartPress 绑定(bind)到类实例的 this:

constructor(props) {
    super(props);
    this.state = {timeElapsed: null};

    var startTime = new Date();

    this.handleStartPress = this.handleStartPress.bind(this);
}