Reactjs 格式化重复表单字段（添加单元）

我正在尝试向redux字段添加一个单位。 该字段包含一个距离。 我想设置一个最大值，并在该值之后加上单位

如果我在字段中键入“1000”，则该字段应显示“100cm”，并且保留到状态的值应为“100”

如果输入太高，我使用规范化器来更改值。那部分有效

我使用格式化程序在值后添加单位，但我认为这不是一个好方法

当格式化程序将单位添加到值中时，规范化程序接收到的值包含该单位。 该装置仅用于显示目的。我不想在正常化器中看到它，也不想在商店中继续使用它。 有办法吗

这是我的密码：

// Normalizer
const lessThanNormalizer = maxValue => 
    newValue => 
        return newValue<maxValue ? newValue : maxValue;

// Formatter
const unitFormatter = unit => 
    value => 
        value+" "+unit;

// Field component
<Field
    name=      "hardware.distance"
    component= {renderMaterialTextField}
    type=      "text"
    label=     "Distance"
    normalize= {lessThanNormalizer(100)}
    format=    {unitFormatter("cm")}
/>

//规范化器
常量lessthanormalizer=maxValue=>
newValue=>
返回新值
值=>
值+“”+单位；
//场分量

---

提前谢谢

我在

parse

prop上添加了一个解析器，成功了。（）

//规范化器
常量lessthanormalizer=maxValue=>newValue=>newValuevalue=>value！==未定义？值+“”+单位：“”；
//分析器
常量cmParser=value=>{
返回值
.replace（//g，“”）
.替换（/c/g，“”）
.替换（/m/g，“”）
}
/* ... */
/* ... */

虽然这是可行的，但更改输入中写入的内容也有点烦人，因为您需要将光标设置在“cm”之前以修改数字，但这是可行的

如果您想让它更方便，您可能希望通过ref以编程方式设置光标位置

此外，存储区中的状态不包含字符串末尾的

cm

我找到了解决办法。 现在一切都很好

我希望它能帮助别人

从“React”导入React
从“../../../renderMaterialTextField”导入renderMaterialTextField；
从“redux表单”导入{Field，getFormMeta}；
从“react redux”导入{connect}；
//从类型为w.x[y].z的字符串中获取嵌套对象
让解析=（s，o）=>{
s=s.replace（/\[（\w+）\]/g，.$1'）；//将索引转换为属性
s=s.replace（/^\./，“”）；//去掉前导点
设a=s.split（'.'）；
for（设i=0，n=a.length；i（新值，以前的值）=>{
如果（newValue.trim（）==“”）newValue=0；
newValue=parseFloat（newValue）；
if（isNaN（newValue））{
newValue=以前的值；
}否则如果（新值>最大值）{
返回最大值；
}else if（newValue（value，name）=>{
如果（值===0）返回“”；
让fieldMeta=resolve（name，formMeta）；//获取字段的meta
if（String（value）.trim（）==“”| |（formMeta[name.split（'.'）[0]！==未定义的&&fieldMeta！==未定义的&！！fieldMeta.active））返回值；
返回值+“”+单位；
};
类MyComponent扩展了React.Component{
render（）{
返回(
)
}
}
MyComponent=connect(
状态=>({
formMeta:getFormMeta（'myForm'）（状态）
})
)（MyComponent）；
导出默认MyComponent；

该

字段

组件属于哪个库？（redux不是一个组件库）它来自refux formMerci Beaucup Emmanuel！我非常感谢您的帮助！但是正如您所指出的，由于光标的位置，UX不是最好的。我刚刚找到了一个似乎运行良好的解决方案。再次感谢

// Normalizer
const lessThanNormalizer = maxValue => newValue => newValue < maxValue ? newValue : maxValue;

// Formatter
const unitFormatter = unit => value => value !== undefined ? value + " " + unit : '';

// Parser
const cmParser = value => {
  return value
    .replace(/ /g, "")
    .replace(/c/g, "")
    .replace(/m/g, "")
}

/* ... */

  <Field
    name="field"
    component="input"
    normalize={lessThanNormalizer(100)}
    format={unitFormatter('cm')}
    parse={cmParser}
  />

/* ... */

import React from 'react'
import renderMaterialTextField from "../../../renderMaterialTextField";
import {Field, getFormMeta} from "redux-form";
import {connect} from "react-redux";

// Get a nested object from a string of type w.x[y].z
let resolve = (s,o) => {
    s = s.replace(/\[(\w+)\]/g, '.$1'); // convert indexes to properties
    s = s.replace(/^\./, '');           // strip a leading dot
    let a = s.split('.');
    for (let i = 0, n = a.length; i < n; ++i) {
        let k = a[i];
        if (k in o) { o = o[k]; } else { return; }
    }
    return o;
};

// Normalizer (limit the value)
const minMaxNormalizer = (min,max) => (newValue, previousValue) => {

    if(newValue.trim()==="") newValue=0;
    newValue = parseFloat(newValue);

    if(isNaN(newValue)) {
        newValue=previousValue;
    }else if(newValue>max) {
        return max;
    }else if(newValue<min) {
        return min;
    }
    return newValue;
};

// Formatter (add the unit)
const unitFormatter = (unit,formMeta) => (value, name) => {
    if(value===0) return "";
    let fieldMeta = resolve(name, formMeta); //Get the meta of the field
    if(String(value).trim()==="" || (formMeta[name.split('.')[0]]!==undefined && fieldMeta!==undefined && !!fieldMeta.active)) return value;
    return value+" "+unit;
};

class MyComponent extends React.Component {

    render() {
        return (
            <>
                <Field
                    name="hardware.device1.distance"
                    component={renderMaterialTextField}
                    type="text"
                    label="Distance"
                    normalize={minMaxNormalizer(0,100)}
                    format={unitFormatter("cm", this.props.formMeta)}
                />
                <Field
                    name="hardware.device1.volume"
                    component={renderMaterialTextField}
                    type="text"
                    label="Volume"
                    normalize={minMaxNormalizer(0,50)}
                    format={unitFormatter("L", this.props.formMeta)}
                />
            </>
        )
    }
}

MyComponent = connect(
    state => ({
        formMeta: getFormMeta('myForm')(state)
    })
)(MyComponent);
export default MyComponent;