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

标签： reactjstypescriptformsreact-reduxantd

Answer 1

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

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