antd+react inputnumber 小数精度

今天药忘吃喽~ 2023-01-10 14:58 412阅读 0赞

**antd+精度状态控制，会出现第一次点击聚焦仍然显示上一次值的情况。**

## 1、首先需要inputnumber对精度进行控制，这里精度控制在1-5 ##

<Form.Item labelCol={ {  span: 8 }} wrapperCol={ {  span: 8 }} label={ "流速小数位数"}>
                        { form.getFieldDecorator('flowrateDecimallen', { 
                          initialValue: objectData?.flowrateDecimallen,
                          rules: [
                            {  validator: (rule: any, value: any, callback: any) => validateHeightAndMin(value, callback, '') }
                          ]
                        })(<InputNumber min={ 0} max={ 5} precision={ 0} placeholder={ "请输入"} onChange={ currentPrecisionChange}></InputNumber>)}
                      </Form.Item>

## 2、受精度控制的inputnumber ##

**初始化数据：**

const initDymAttr = () => { 
        dymAttr.flowrateInit = undefined
        dymAttr.flowInit = undefined
        dymAttr.cumulativeFlowMax = undefined
        dymAttr.cumulativeFlowMin = undefined
        dymAttr.currentSpeedMax = undefined
        dymAttr.currentSpeedMin = undefined
      }

**状态：**

const [currentPrecision, setCurrentPrecision] = useState<number | undefined>(5);

<Form.Item labelCol={ {  span: 8 }} wrapperCol={ {  span: 8 }} label={ "流速初值"}>
                        { form.getFieldDecorator('flowrateInit', { 
                          initialValue: objectData?.flowrateInit,
                          rules: [
                            {  validator: (rule: any, value: any, callback: any) => validateHeightAndMin(value, callback, '') }
                          ]
                        })(<InputNumber onChange={ (value: any) => keyChange(value, "flowrateInit", "current")}
                          onFocus={ currentNumberFocus} precision={ currentPrecision} placeholder={ "请输入"}></InputNumber>)}
                      </Form.Item>

## 3、精度值变化响应函数： ##

const currentPrecisionChange = (value: number | undefined) => { 
        if (value != undefined && (value > 5 || value < 0)) { 
          message.error("小数位为0-5位")
        }
        else { 
          setCurrentPrecision(value)
        }
      }

## 4、受控组件值变化响应函数： ##

const keyChange = (value: any, attrName: string, attrType: string) => { 
        if (dymAttr[attrName] != value) { 
          dymAttr[attrName] = value
          if (dymAttr[attrName] != null && parseFloat(dymAttr[attrName]).toFixed(currentPrecision) != "NaN" && attrType == "current") { 
            form.setFieldsValue({  [attrName]: parseFloat(dymAttr[attrName]).toFixed(currentPrecision) })
            const textDom: any = document.getElementById(attrName);
            textDom.focus()
          }
          else if (dymAttr[attrName] != null && parseFloat(dymAttr[attrName]).toFixed(flowPrecision) != "NaN" && attrType == "flow") { 
            form.setFieldsValue({  [attrName]: parseFloat(dymAttr[attrName]).toFixed(flowPrecision) })
            const textDom: any = document.getElementById(attrName);
            textDom.focus()
          }
        }
      }

## 5、受控组件聚焦响应函数： ##

const currentNumberFocus = (e: any) => { 
        var fieldName = e.target?.id
        if (dymAttr[fieldName] != null && parseFloat(dymAttr[fieldName]).toFixed(currentPrecision) != "NaN") { 
          form.setFieldsValue({  [fieldName]: parseFloat(dymAttr[fieldName]).toFixed(currentPrecision) })
        }
      }