在 antd design react 中使用带有 Form FormItem 的 React-Quill答案

【问题标题】：Using React-Quill with Form FormItem in antd design react在 antd design react 中使用带有 Form FormItem 的 React-Quill
【发布时间】：2019-07-05 19:06:16
【问题描述】：

其实我想用 react-quill 组件作为 antd Form.item 的一部分。

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

上面的组件是 react-quill 基础组件。我需要像下面提到的那样使用

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

在<Field />之上，其实是从redux form导入props，也就是我在AntdForm中使用的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}
/>

如上所示，我如何在Form.Item 中使用antd Input 而不是在Redux-Form Field 中渲染。同样，我需要使用React-Quill 组件。

【问题讨论】：

标签： reactjs antd quill ant-design-pro

【解决方案1】：

一种方法是在getFieldDecorator 中包裹一个隐藏的antd <Input />。然后，渲染 react-quill 输入并使用隐藏的<Input /> 来管理它的状态。请使用普通的 <input /> 查看此示例：

class Form extends React.Component {
  handleChange = e => {
    const { value } = e.target;

    this.props.form.setFieldsValue({ input: value });
  };

  render() {
    const { getFieldValue, getFieldDecorator } = this.props.form;

    return (
      <Form layout="inline">
        {/* This is a hidden antd Input used to manage form state */}
        {getFieldDecorator("input")(<Input style={{ display: "none" }} />)}

        <input
          type="text"
          onChange={this.handleChange}
          value={getFieldValue("input")}
        />

        <Form.Item>
          <Button
            type="primary"
            htmlType="submit"
            onClick={() => console.log(getFieldValue("input"))}
          >
            test
          </Button>
        </Form.Item>
      </Form>
    );
  }
}

【讨论】：

Max，我没有明白你的意思，但无论如何我做到了，感谢你的努力。
@MuhammadSulman 你是怎么做到的？请分享你的经验
@AhmedBltagy 在下面发布答案。如果它仍然不起作用，请随时联系。

【解决方案2】：

从https://www.npmjs.com/package/react-quill 安装"react-quill": "^1.3.3"

我已经制作了我的一个 formHOC util 文件，我从中导入所有表单组件。同样设计这个组件。

import ReactQuill from "react-quill"; // third party library "react-quill": "^1.3.3",

import {
  Form,
} from 'antd'; 

// customization shown below

const FormItem = Form.Item;

var formItemLayout = {
  labelCol: {
    xs: { span: 24 },
    sm: { span: 8 },
  },
  wrapperCol: {
    xs: { span: 24 },
    sm: { span: 16 },
  },
};

const makeEditorField = 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}
       onBlur={(range, source, quill) => {
         input.onBlur(quill.getHTML());
       }}
      >
        {children}
      </Component>
      {labelRight && (
        <span style={{ color: (rest.disabled && '#5a5a5a') || '#9e9e9e' }}>
          {labelRight}
        </span>
      )}
    </FormItem>
  );
};

export const AEditor= makeEditorField(ReactQuill); // Export it to use other files.

用法

import {AEditor} from "../../utils/formHOC";
import { Field, reduxForm } from 'redux-form/immutable';

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

【讨论】：