在React Native

Question

我正在尝试使用文本输入和2触摸突出显示＆＃34; +＆＃34;来创建数字增量/减量器。和＆＃34; - ＆＃34;。

<TextInput
  keyboardType='number-pad'
  value={this.state.textValue}
  onChangeText={this.updateText}
  style={styles.textInput}
/>

<TouchableHighlight
  style={styles.button}
  onPress={this.increment}>
    <Text style={styles.buttonTextFill}>+</Text>
</TouchableHighlight>

<TouchableHighlight
  style={styles.button}
  onPress={this.decrement}>
    <Text style={styles.buttonTextFill}>-</Text>
</TouchableHighlight>

我使用以下方法：

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

此外，我已将 textValue 设置为getInitialState函数中的状态并将其设置为0.

为什么这不起作用，我做错了什么？

Answer 1

看起来TextInput不是值为数字的粉丝。我在TextInput的值上放了一个.toString（），一切都按预期开始工作。此外，您需要将字符串值转换为on更改中的数字，因为TextInput会在您更改字符串时传递字符串。

新的更新方法：

updateText: function (text) {
    this.setState({textValue: +text});
},

新的TextInput：

<TextInput
    keyboardType='number-pad'
    value={this.state.textValue.toString()}
    onChangeText={this.updateText}
    style={styles.textInput}
/>

https://rnplay.org/apps/ZNcwSg