javascript - 如何在 React Native 中使用 TouchableHighlight 组件按下按钮时发生 2 个操作？

Question

我已经设法在按下按钮时使控制台输出文本。然而，我也希望每次点击都会增加一个名为 nClicks 的全局变量的值，但一直很难做到这一点。这是我的代码:

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 */
'use strict';

var React = require('react-native');
 var {
  AppRegistry,
  StyleSheet,
  Text,
  View,
  TouchableHighlight,
        } = React;

        var nClicks = 0;

        var simple = React.createClass({
        render: function() {
        return (
        <View style={styles.container}>
        <Text style={styles.welcome}>
        Tap the button as fast as you can!
        </Text>

        <TouchableHighlight style={styles.button}
        onPress={() =>

        nClicks++,
        console.log('pressed')}>

        <Text style={styles.buttonText}>
         Tap Here!
        </Text>

        </TouchableHighlight>

  </View>
);
}
});

var styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#F5FCFF',
},
welcome: {
fontSize: 30,
textAlign: 'center',
                           marginTop: -280,

},
instructions: {
textAlign: 'center',
color: '#333333',
marginBottom: 5,
},

                           button:{
                           width: 250,
                           height: 100,
                           borderColor: 'red',
                           borderWidth: 3,
                           borderRadius: 5,
                           marginTop: 60,

                           justifyContent: 'center',

                           alignItems: 'center',
                           textAlign: 'center',
                           color: 'red',

                           },

                           buttonText:{
                           fontSize: 20,
                           }



                        });

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

Answer 1

您可以为带有计数器初始化的类创建一个构造函数:

class YourClass extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
           count: 0
       }
   }
   render() {
      //......
   }
};

然后，当您按下 TouchableHighlight 组件时，您必须增加计数变量。

this.setState({
    count: this.state.count + 1
})

这是可能的，因为每个组件都有一个状态对象(还有一个 props 对象)。该状态是使用 setState 方法设置的。