为`Field` redux 组件构建一个高阶组件

Question

我有一个Field 组件，我想构建一个新的CurrencyField

旧的Field 组件

<Field
    component={FormField}
    id="amount"
    label="Amount"
    type="text"
    name="amount"
    {...currencyMask}
    maxLength={16}
    valid={}
    validate={[
        required(),
        length({ max: 13 }),
        numericality({ '>': 0, msg: 'Must be greater than 0!' }),
        numericality({ '<=': loan.AccountBalance, msg: `Must be less than or equal to customer's account balance of $${loan.AccountBalance}` }),
    ]}
/>

新的CurrencyField 相当于上面的Field，我想看起来像这样：

<CurrencyField
    id="amount"
    label="Amount"
    type="text"
    name="amount"
/>

或

<Field
    component={CurrencyField}
    id="amount"
    label="Amount"
    type="text"
    name="amount"
/>

尝试执行此操作时出现错误：

export const CurrencyField = (props) => {

  return (
    <Field
      name={props.input.name}
      type={props.type || "text"}
      maxLength={16}
      {...props}
      validate={[
        required(),
        length({ max: 11 }),
        numericality({ '>': 0, msg: 'Must be greater than 0!' })
      ]}
    />
  );
}

Answer 1

你遇到了什么错误？

您还应该将验证功能移到渲染之外https://github.com/erikras/redux-form/issues/4017

const validateCurrency = [
    required(),
    length({ max: 11 }),
    numericality({ '>': 0, msg: 'Must be greater than 0!' })
 ]
export const CurrencyField = (props) => {
    return (
      <Field
         name={props.input.name}
         type={props.type || "text"}
         maxLength={16}
         {...props}
         validate={validateCurrency}
      />
    );
}

Answer 2

您在 CurrencyField 无状态函数中的新 Field 组件中缺少 组件 属性