实际上我想使用react-quill组件作为antd Form.item的一部分。
<ReactQuill
ref='editor'
onChange={this.onChange}
/>
以上组件是反应 - 基本组件。我需要像下面提到的那样使用
<Field
label="Departure"
placeholder="Departure"
name="departure"
component={}
/>
在<Field />
之上,实际上它是从redux形式的导入道具,也就是说,我在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}
/>
如上图所示,我如何在antd
中使用Input
Form.Item
而不是在Redux-Form
Field
中渲染。同样,我需要使用React-Quill
组件。
一种方法是在<Input />
中包裹一个隐藏的antd getFieldDecorator
。然后,渲染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>
);
}
}
从"react-quill": "^1.3.3"
安装https://www.npmjs.com/package/react-quill
我已经从我导入所有表单组件的位置创建了一个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}
/>