[英]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> ); } }
从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.