reactjs - React-Quill を antd design react の Form FormItem で使用する

Question

実際には、antd Form.item の一部として react-quill コンポーネントを使用したいと考えています。

 <ReactQuill
   ref='editor'
   onChange={this.onChange}
 />

上記のコンポーネントは、react-quill 基本コンポーネントです。以下のように使用する必要があります

 <Field
   label="Departure"
   placeholder="Departure"
   name="departure"
   component={}
 />

上記<Field />、実際にはreduxフォームからのインポート小道具です。Antdつまり、以下のようにForm.Itemとしてフォームで使用しています

import {
  Form,
  Input,
} from 'antd'

const FormItem = Form.Item;

const makeField = Component => ({
  input,
  meta,
  children,
  hasFeedback,
  label,
  labelRight,
  ...rest
}) => {
  const hasError = meta.touched && meta.invalid;
  return (
    <FormItem
      {...formItemLayout}
      label={label}
      validateStatus={hasError ? 'error' : 'success'}
      hasFeedback={hasFeedback && hasError}
      help={hasError && meta.error}
    >
      <Component {...input} {...rest}>
        {children}
      </Component>
      {labelRight && (
        <span style={{ color: (rest.disabled && '#5a5a5a') || '#9e9e9e' }}>
          {labelRight}
        </span>
      )}
    </FormItem>
  );
};

export const AInput = makeField(Input);

フォームでの使用

<Field
  label="Destination"
  placeholder="Destination"
  name="destination"
  component={AInput}
/>

上記のように、antd InputinForm.Itemと render inを使用する方法Redux-Form Field。同様に、React-Quillコンポーネントを使用する必要があります。