为 `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}` }),
    ]}
/>

new 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

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

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

building a higher order component for `Field` redux component

reactjs

redux

redux-form