Javascript 在React Native中设置和绑定状态

我正在React Native中创建一个计时器应用程序，并希望使用state显示经过的毫秒数。我下面的教程有点旧，使用纯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);
   }

   ...

}

。。。
类应用程序扩展组件{
建造师（道具）{
超级（道具）；
//在此处初始化您的状态
此.state={
已用时间：空
}
}
//getInitialState（）{
//返回{
//已用时间：空
//    }
// }
render（）{
返回(
{this.state.timeappeased}
...
);
}
...
手稿{
让startTime=新日期（）；
//用一些新的值更新我们的状态
设置间隔（（）=>{
这是我的国家({
已用时间：新日期（）-startTime
});
}, 30);
}
...
}

我想知道如何用JavaScript ES6解决这个问题。我想，问题在于绑定的东西，但我无法从中得到结果。

---

提前谢谢

我通过绑定handleStartButton函数修复了这个问题，我从其他函数startStopButton调用了该函数

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

使用ES6时要小心，必须绑定这些函数才能获得正确的结果）Peace）

尝试以下方法：

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

导入{
评估学，
样式表，
文本，
看法
可触摸不透明度
}从“反应本机”；
导出默认类HelloReact扩展组件{
声明：{
时间流逝：字符串；
};
构造函数（道具：对象）{
超级（道具）；
this.state={timeappeased:'start'}
};
扶手压杆=（）=>{
让startTime=新日期（）；
设置间隔（（）=>{
这是我的国家({
已用时间：新日期（）-startTime
});
}, 30);
}
render（）{
返回(
{this.state.timeappeased}
);
}
}
const styles=StyleSheet.create({
容器：{
弹性：1，
为内容辩护：“中心”，
对齐项目：“居中”，
背景颜色：“#F5FCFF”，
},
});
AppRegistry.registerComponent（'HelloReact'，（）=>HelloReact）；

---

使用像这样的箭头函数handleStartPress=（）=>{…}，那么你就不需要像这样绑定你的函数了：this.handleStartPress.bind（this）。

你在哪里使用handleStartPress？@AhmedAli我有一个名为

startStopButton

的函数，它只返回带有文本的

，然后从那里调用

handleStartPress

。我通过绑定

handleStartButton

函数解决了这个问题

谢谢~state:{timeappeased:String；}；``的功能是什么我认为没有必要。

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