reactjs React Native Form -检查number是否有小数点问题

r1zhe5dt  于 2023-04-05  发布在  React
关注(0)|答案(1)|浏览(106)

我在React Native视图中有一个基本的表单-作为一个基本的摘要,它收集了在以后的计算中使用货车里程。表单输入使用数字键盘,两个字段都是必需的和有效的。我想验证数字已经输入,并且用户没有使用小数点。
对于背景-这里有一个镜头的形式:

每个字段都是使用RN TextInput创建的,除了州名之外,两者都是相同的-代码如下-

<View style={CheckInStyles.textBlock}>
          <Text style={CheckInStyles.introTxt}>
            3. End Mileage.<Text style={CheckInStyles.errorStyle}> * </Text>
          </Text>
          <Text style={CheckInStyles.introTxtOr}>
            (Please enter mileage upon completing your journey).
          </Text>
        </View>
        <View style={formStyles.textInputBlock}>
          <TextInput
            placeholder="Enter Vehicle END Mileage"
            style={formStyles.textInputText}
            value={this.state.endMileage}
            autoCorrect={false}
            returnKeyType="done"
            keyboardType="numeric"
            onSubmitEditing={Keyboard.dismiss}
            onChangeText={text => this.setState({endMileage: text})}
          />
        </View>

初始状态为数字-代码如下:

constructor(props) {
      super(props);

      this.state = {
        startMileage:0,
        endMileage:0,
      }
  }

下面的代码是:

if (this.state.startMileage && this.state.endMileage && this.state.tripReason && Number.isInteger(this.state.startMileage) && Number.isInteger(this.state.endMileage)) {
        
        return true
        
       }
       else {
        return false;
       }

我需要帮助理解的部分是数字/小数点检查-我正在使用

Number.isInteger()

如果我使用直接号码即:

Number.isInteger(3.3)

结果为false -正如预期

Number.isInteger(3)

结果如预期那样为真
如果然而我使用状态数值-

Number.isInteger(this.state.endMileage))

无论该值是整数还是包含小数点-结果始终为false。
这是因为状态输入使用的是文本输入,并且值被转换为字符串吗?有人能提供解决方案/解释吗?谢谢。

vyu0f0g1

vyu0f0g11#

“这是因为状态输入使用的是文本输入吗?”是的,正是如此。
Number.isInteger(value)will always return false if the value is not a number .
您可以查看Number.parseFloat,并可能传递keyboardType=“number-pad”而不是numeric。

相关问题