实际上,我想将react-quill组件用作antd Form.item的一部分。
<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
中使用Input
Form.Item
,而不是在Redux-Form
Field
中进行渲染。同样,我需要使用React-Quill
组件。
答案 0 :(得分:0)
执行此操作的一种方法是将隐藏的蚂蚁cscript
包装在<Input />
中。然后,呈现反应羽毛笔输入并使用隐藏的getFieldDecorator
来管理其状态。请使用简单的<Input />
来查看此示例:
<input />
答案 1 :(得分:0)
从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}
/>