Question

我有一个名为＆＃34;十进制＆＃34;的字段在这个领域，我还有一个名为＆＃34; precision＆＃34;的属性。所以我的领域可能是0.00或0.000 ......等等。

现在我可以使用一个只允许数字和一个句点的normalize函数，但我还需要传递一些能告诉我字段精度的东西。我能在这做什么？

我想我可以创建precisionOne（），precisionTwo（），precisionThree（）等等。但这似乎是很多代码重复，因为精度（value，previousValue，precision）

编辑：我在下面添加了一些代码。它非常标准，由几个关键部分组成：

createField.js =这基本上是我的组件，它接收包含fields对象的fields.json及其键：{row_position，id，identifier，required，min_length，max_length，field_type}

field_type可以是：数字，文本，小数，日期等。

const row = [];
for(let j = fields.length - 1 - 1; j > 0; j--) {
    const {row_position, id, identifier, required, min_length, max_length, field_type} = fields[j];
    const validations = [];
    //As of now normalize can only be one fuction        
    let     normalize = null;
    /// SETUP VALIDATIONS FOR FIELDS ///
    if(required) {validations.push(validationFunctions.required)}; // REQUIRED
    if(field_type === 3) {validations.push(validationFunctions.email)}; //EMAIL
    if(field_type === 4) {validations.push(validationFunctions.number); normalize = normalizeFunctions.number;}; //NUMBER
    if(field_type === 7) {validations.push(validationFunctions.number); normalize = normalizeFunctions.decimal;}; //DECIMAL

row.unshift(<Field key={id} name={identifier} component={renderField} validate={validations} normalize={normalize} props={fields[j]}/>);

}

这是我的renderField组件：

import React from 'react';
import {padWithZero} from '../../helpers/objectManipulationHelpers';


//Get field to display based on type
export default function constructField(field) {
    const {input, type, field_type, className, cols, precision, required, id, identifier, addOn} = field;

    let fieldTypeBasedCss = '';
    let typeAddOn = null;
    let iconAddOn = null;
    let _precision = null;
    let fieldType = 'text';

    switch(field_type) {
        case 2:
            fieldType = 'password';
            typeAddOn = <span class="fa fa-asterisk" aria-hidden="true"/>;
            break;
        case 3:
            fieldTypeBasedCss = 'email-field';
            typeAddOn = <span class="fa fa-at" aria-hidden="true"/>;
            break;
        case 4:
            fieldTypeBasedCss = 'number-field';
            typeAddOn = <span class="fa fa-sort-numeric-asc" aria-hidden="true"/>;
            break;
        case 6:
            fieldTypeBasedCss = 'money-field';
            typeAddOn = '$';
            break;
        case 7:
            fieldTypeBasedCss = 'decimal-field';
            typeAddOn = padWithZero('0.', precision + 2);
            _precision = precision;
            break;
        case 8:
            fieldTypeBasedCss = 'percent-field';
            _precision = precision;
            typeAddOn = '%';
            break;
    }

  const css = `${className} ${fieldTypeBasedCss}`;

    switch(type) {
        //Type Text
        case 0:
            return (
                                <div className={typeAddOn || addOn ? 'input-group' : ''}>
                                        {addOn ? <span class="input-group-addon" dangerouslySetInnerHTML={{__html: addOn}} /> : ''}
                                        <input {...input} required={required} type={fieldType} size={cols} class={`form-control ${css}`} data-field-id={id} data-field-identifier={identifier} data-precision={_precision}/>
                                        {typeAddOn ? <span class="input-group-addon">{typeAddOn}</span> : ''}
                                </div>
                            );
        //....more field types below...
        //.....

    }
}

现在这里是重要部分：

我的formNormalize.js保存了我的所有规范化函数：

//Intercept user input and return valid value field

//Force uppercase
export const upper = value => value && value.toUpperCase();
//Force lowercase
export const lower = value => value && value.toLowerCase();
//Force number
export const number = function(value, previousValue) {
  return value.replace(/[^\d]/g, '');
};

//Here I need another variable passed that's called "precision" or 
//something that let's me use the same function to return either 0.00 or 
//0.000 etc depending on the precision of the decimal field. Right now the 
//function will return any valid decimal number, so 0.0 or 0.00 or 0.0000000 
//anything, but I need to be able to limit the number of decimal places.
export const decimal = function(value, previousValue) {
  if(value && !isNaN(Number(value))){
    return value;
  } else {
    return previousValue;
  };
};

Answer 1

您的规范化器可以采用其他参数：

export const normalizeWhatever = (paramOne,paramTwo) =>
(value, previousValue, allValues) => {
    console.log(paramOne,paramTwo,value)
}

如何传递其他参数以进行标准化？

1 个答案: