Question

单击按钮时，我希望每次增加一个值。我想调用函数incrementCounter()来处理我的操作，而不是：onPress={() => this.setState({Count: ++this.state.Count})}

到目前为止，这是我的代码：

class Main extends React.Component{
constructor(props){
    super(props);
    this.state = {
        Count: 0,
    }
}
incrementCounter(){
    this.setState({
        Count: this.state.Count + 1 //!!! Where error occurs
    }); 
}

 render() {
    return(
        <View style={styles.mainContainer}>
            <Text style={styles.title}>{'Count: ' + this.state.Count} </Text>
            <TouchableHighlight
                style={styles.button}
                onPress={this.incrementCounter}
                underlayColor='white'>
                <Text style={styles.buttonText}>+</Text>
            </TouchableHighlight>
        </View>
    )
 }
};

上面的代码导致错误 - 红色屏幕： “undefined不是一个对象（评估'this.state.Count'）”，incrementCounter()＆lt; - 注释显示错误发生时出错。

我在网上找到的大多数示例都没有使用ES6语法，但我想尝试坚持这一点，以使其在我的应用程序中保持标准。未来的工作将包括具有相反的decrementCounter()函数，但是不允许计数器降到零以下。

Answer 1

我看到你正在使用es6表示法，请尝试以下方法：

 render() {
    return(
        <View style={styles.mainContainer}>
            <Text style={styles.title}>{'Count: ' + this.state.Count} </Text>
            <TouchableHighlight
                style={styles.button}
                onPress={this.incrementCounter.bind(this)}
                underlayColor='white'>
                <Text style={styles.buttonText}>+</Text>
            </TouchableHighlight>
        </View>
    )
 }

注意事件上的.bind（this），这是必需的，以便它实际上引用类本身而不是某些全局函数。

反应Nat计数器

1 个答案: