reactjs - Ant.design 没有检测到 Form.Item React 中的自定义输入组件

Question

所以，主要的问题是，antd 表单没有检测到我基于 antd 标准输入的自定义输入:有一段表单代码(AddProduct):

                   <Form.Item
                        className="m-t-10"
                        name="price"
                        rules={[
                            {
                                required: true,
                                message: `${t('FORM.ERR.SHOP.PRICE')}`,
                            },
                        ]}
                    >
                        <CurrencyInput size="small" placeholder={t('FORM.SHOP.PRICE_VAT')} name="price" />
                    </Form.Item>

有我的自定义输入(CurrencyInput):

return (
    <Input size={props.size} placeholder={props.placeholder} name={props.name} type="number" prefix={settings[6].value} />
)

问题是当我尝试提交表单时它没有检测到货币输入，并抛出此字段为必填项的错误。任何想法都可以实现自定义输入，基本上，它比自定义输入更 HOC

Answer 1

您需要将所有 Prop 传递给您的自定义组件，因为 Form.Item 传递给那里的 onChange 和 value Prop

function CustomInput({size, placehodler, name, ...restProps}) {
  return (
    <Input size={size} placeholder={placeholder} name={name} 
      type="number" prefix={settings[6].value} {...restProps} />
  )
}