问题描述
我正在尝试使用此函数来增加和减少输入数字,同时它显示出意外的语法错误.这段代码有什么问题:
I am trying to use this functions to increment and decrement input number while it's showing unexpected syntax error. What is wrong in this code:
constructor(props) {
super(props);
this.state = {
textValue:1
};
}
updateText: function (text) {
this.setState({textValue: +text});
},
decrement: function () {
this.setState({textValue: this.state.textValue - 1});
},
increment: function () {
this.setState({textValue: this.state.textValue + 1});
},
render() {
return (
...
...
<View style={styles.view}>
<Button bordered style={styles.button} onPress={this.decrement}>
<Text style={{color:'#000000'}}> - </Text>
</Button>
<Item style={styles.input} regular>
<Input
keyboardType='number-pad'
value={this.state.textValue.toString()}
onChangeText={this.updateText}
placeholder='1' />
</Item>
<Button bordered style={styles.button} onPress={this.increment}>
<Text style={{color:'#000000'}}> + </Text>
</Button>
<Button style={styles.button}>
<Icon name="cart" style={{color: secondary}} />
</Button>
);
}
}
显然,这不是与封闭标签或与,连接的错误;}因为它没有显示任何提到的错误.它只是说意外错误.我们怎样才能使这段代码工作?
Obviously, it's not an error connected with enclosing tag or with,; } Since it's not showing any of the mentioned errors. It just says unexpected error. How can we make this code work?
推荐答案
试试这个代码
constructor(props) {
super(props)
this.state = {
textValue: 1
};
}
decrement() {
this.setState({ textValue: this.state.textValue - 1 });
}
increment() {
this.setState({ textValue: parseInt(this.state.textValue) + 1});
}
render() {
return (
<View style={styles.view}>
<TouchableOpacity bordered style={styles.button} onPress={() => this.decrement()}>
<Text style={{ color: '#000000' }}> - </Text>
</TouchableOpacity>
<TextInput
keyboardType="numeric"
value={this.state.textValue + ""}
onChangeText={(text) => this.setState({ textValue: text })}
placeholder='1' />
<TouchableOpacity style={styles.button} onPress={() => this.increment()}>
<Text style={{ color: '#000000' }}> + </Text>
</TouchableOpacity>
<TouchableOpacity style={styles.button}>
<Icon name="cart" style = {{ color: secondary }} />
</TouchableOpacity>
</View>
)
}
}
我使用的必要进口是:
import React, { Component } from 'react';
import {
StyleSheet,
View,
Text,
Icon,
TouchableOpacity,
TextInput
} from 'react-native';
import { Icon } from 'react-native-elements'