Property 'onChange' does not exist on type 'IntrinsicAttributes & FormItemProps' on Ant Design

Viewed 3684

I'm passing onChange, onFocus and onBlur to a Form.Item from antd.

<Form.Item
  name={[id]}
  rules={[{ type, required, ...rules }]}
  onChange={onChange}
  onFocus={() => setIsFocused(true)}
  onBlur={e => setIsFocused(!!e.target.value)}>
  {children}
</Form.Item>

But when running next build, this error:

Type error: Type '{ children: ReactNode; name: string[]; rules: any[]; onChange: (event: FormEvent<HTMLInputElement>) => void; onFocus: () => void; onBlur: (e: any) => void; }' is not assignable to type 'IntrinsicAttributes & FormItemProps'.
  Property 'onChange' does not exist on type 'IntrinsicAttributes & FormItemProps'.

  13 |         name={[id]}
  14 |         rules={[{ type, required, ...rules }]}
> 15 |         onChange={onChange}
     |         ^
  16 |         onFocus={() => setIsFocused(true)}
  17 |         onBlur={e => setIsFocused(!!e.target.value)}>
  18 |         {children}

It applies to all 3 methods quoted above. How do I solve this?

1 Answers

This won't work because onChange, onFocus and onBlur are not props for Form.Item. Form manages the state of the form internally, to be used sort of like this: https://codesandbox.io/s/9bpnu?file=/index.js. If you wish to manage the state of the form by yourself I suggest you use the Input component of Ant Design.

Related