小程序Input表单输入限制最大值、最小值、只能输入数字、小数点位数

最新推荐文章于 2024-06-26 16:14:07 发布

一下子就醒了

最新推荐文章于 2024-06-26 16:14:07 发布

阅读量5.3k

点赞数 1

分类专栏： Taro react 前端杂谈文章标签： react.js

本文链接：https://blog.csdn.net/weixin_42442713/article/details/119952675

版权

本文介绍了如何在React.js中使用handleCheckInput函数来限制Input表单的输入，包括设置最大值、最小值、确保输入为数字及控制小数点位数。通过在用户输入时实时检查并调整值，确保输入符合预设条件，并应用了防抖技术以优化性能，只处理最后一次输入值。

摘要由CSDN通过智能技术生成

实现表单输入限制主要看：handleCheckInput 这个函数

基本思路：在用户输入的时候，获取input输入的值，根据值判断是否符合最大值、最小值和数字等相关预设条件，如果不符合，则进行赋值替换。

可加入一些操作：加入防抖的操作，用户输入在多次输入值的时候，设定时间内，只获取最后一次值

import React, { useState, useCallback, FC, useEffect } from 'react'
import { t } from 'gm-i18n'
import { Flex, View, Dialog, Input, Toast } from '@xx-mobile/mp'
import { observer } from 'mobx-react'
import _ from 'lodash'

import store from '../store'
import classNames from 'classnames'
import { toJS } from 'mobx'

interface RecordDetailCellProps {
  type?: 'page' | 'modal'
}

const RecordDetailCell: FC<RecordDetailCellProps> = ({ type = 'page' }) => {
  const { record_detail, isOk } = store
  /** 模拟强更新 */
  const [, updateState] = useState({})
  const forceUpdate = useCallback(() => updateState({}), [])

  /** 删除 */
  const handleDetele = (index: number, name: string): void => {
    Dialog.delete(`确定要删除${name || ''}吗`).then(
      () => {
        // store.setCurrentViewId(`row-${index - 1 >= 0 ? index : 0}`)
        return store.delMealRecordRow(index)
      },
      () => {
        console.log('reject')
      }
    )
  }

  /**
   * 一些校验 最大值、最小值、只能输入数字、保留小数点
   * @param value
   * @param