格式化Redux格式的字段（添加单位）

Question

我正在尝试将单元添加到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")}
/>

提前感谢！

Answer 1

我设法通过在parse道具上添加parser来做到这一点。 （doc）

// 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}
  />

/* ... */

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

如果要使其更加方便，您可能需要通过参考以编程方式设置光标位置。

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

Codepen here

Answer 2

我找到了解决方案。现在一切正常。

我希望它可以帮助其他人。

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;