Question

我正在React Native中创建一个计时器应用程序，并希望使用状态显示已用的毫秒数。我正在关注的教程有点陈旧，使用普通的JavaScript而不是ES6，所以我试图将他的代码转换成ES6，并且遇到了这个小问题。当我按下开始按钮时，它显示未定义不是函数的错误。我试过可能的方法来解决问题，似乎不起作用

...

class App extends Component {
   constructor(props) {
      super(props);
      // Initialize your state here
      this.state = {
         timeElapsed: null
      }
   }

   // getInitialState() {
   //    return {
   //       timeElapsed: null
   //    }
   // }

   render() {
      return (
         <View style={styles.container}>
            <View style={[styles.header, this.border('yellow')]}>
               <View style={[styles.timerWrapper, this.border('red')]}>
                  <Text>
                     {this.state.timeElapsed}
                  </Text>
               </View>

               ...
         </View>
      );
   }

   ...

   handleStartPress() {
      let startTime = new Date();

      // Update our state with some new value
      setInterval(() => {
         this.setState({
            timeElapsed: new Date() - startTime
         });
      }, 30);
   }

   ...

}

我想知道如何使用JavaScript，ES6修复此问题。我认为，问题在于绑定的东西，但我无法从中得到结果。提前谢谢！

Answer 1

我通过绑定handleStartButton函数解决了这个问题，我从其他函数调用了startSttopButton

startStopButton() {
   return (
      <TouchableOpacity onPress={this.handleStartPress.bind(this)}>
         <Text>Start</Text>
      </TouchableOpacity>
   )
}

我没有触及handleStartButton函数

handleStartPress() {
   let startTime = new Date();

   // Update our state with some new value
   setInterval(() => {
      this.setState({
         timeElapsed: new Date() - startTime
      });
   }, 30);
}

使用ES6时要小心，你必须绑定这些功能才能得到正确的结果）和平）

Answer 2

试试这个：

import {
  AppRegistry,
  StyleSheet,
  Text,
  View,
  TouchableOpacity
} from 'react-native';

export default class HelloReact extends Component {

  state:{
    timeElapsed : String;
  };

  constructor(props: Object) {
    super(props);
    this.state={timeElapsed : 'start'}
  };

  handleStartPress = () =>{
    let startTime = new Date();
    setInterval(() => {
        this.setState({
            timeElapsed: new Date() - startTime
        });
    }, 30);
  }

 render() {
  return (
      <TouchableOpacity onPress={this.handleStartPress} style={styles.container}>
         <View style={styles.container}>
                <Text>
                     {this.state.timeElapsed}
                </Text>
        </View>
     </TouchableOpacity>
  );
 }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
});

AppRegistry.registerComponent('HelloReact', () => HelloReact);

使用箭头功能，如下所示：handleStartPress =（）=＆gt; {...}，然后你不需要像这样绑定你的函数：this.handleStartPress.bind（this）。

在React Native

2 个答案: