包装 Antd 组件答案

【问题标题】：Wrapping Antd Component包装 Antd 组件
【发布时间】：2017-09-13 04:37:48
【问题描述】：

我想包装 antd 组件，例如。 Input 到 MyInput 中，这样我就可以添加对新专业人士和类名的支持，但是当我将其放入 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;

现在如果我把<MyInput /> 放在<Form/> 里面，它就会停止工作

DEMO

我尝试调试，看起来 rc-form/lib/createBaseForm 中的 saveRef 函数正在接收 null 作为组件参数，所以这让我觉得这是一个 ref 问题，但我不知道如何解决它:S

【问题讨论】：

标签： reactjs antd

【解决方案1】：

没关系，我找到了答案……

根据Refs 文档

refs 不适用于无状态组件，将其更改为 class 并工作

【讨论】：