繁体   English   中英

在Antd设计中将React-Quill与Form FormItem一起使用

[英]Using React-Quill with Form FormItem in antd design react

实际上,我想将react-quill组件用作antd Form.item的一部分。

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

上面的组件是反应羽毛笔的基本组件。 我需要使用如下所述

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

<Field />上面,实际上是从redux表单导入道具, Antd ,我在Antd Form中使用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组件。

一种方法是在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> ); } } 

编辑qyol7omww

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}
          />

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM