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方法设置此状态。

使用React Native中的TouchableHighlight组件按下按钮时，如何进行2个操作？

1 个答案: