Ant.design 未检测到 Form.Item React 中的自定义输入组件

Question

So, the main problem is, that antd form does not detect my custom input based on antd standard input: There is a piece of form code (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>

There is my custom input (CurrencyInput):

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

The problem is when I try to submit the form it does not detect currency input, throws err that this field is required. Any ideas are it possible to implement custom input, basically, it's more HOC than custom input

Answer 1

You need to pass to your custom component all props, because Form.Item pass to there onChange and value props

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