Wrapping Antd Component

Question

I want to wrap antd component eg. Input into MyInput so I can add support for new pros and classNames, however it stoped working when I put then inside of the Form

MyInput.js

import { Input } from 'antd';

function MyInput({ className='', ...rest }) {
  const computedClassName = 'my-input '+className;

  return (
    <Input className={computedClassName} {...rest} />
  );
}

MyInput.defaultProps = Input.defaultProps;
MyInput.propTypes = Input.propTypes;
MyInput.Group = Input.Group;
MyInput.Search = Input.Search;
MyInput.TextArea = Input.TextArea; 

Now if I put <MyInput /> inside of <Form/> it stops working

DEMO

I tried to debug, looks like the saveRef function in rc-form/lib/createBaseForm is receiving null as component argument, so this makes me feel is a ref problem, but I'm not sure how to fix it :S

Answer 1

Nevermind I found the answer...

As per Refs documentation

refs doesnt work on stateless components, change it to class and worked