[英]use formik on react-draft-wysiwyg
我正在为我的表单使用formik
。 我想用 formik 实现react-draft-wysiwyg
wysiwyg 编辑器。 但是,在我的案例中,我发现了以下警告。
Warning: Formik called `handleBlur`, but you forgot to pass an `id` or `name` attribute to your input:
因此,我认为,如果存在验证问题,我无法显示错误,并且如果我移动到下一个表单并返回到我在编辑器上放置内容的表单,状态也不会保留。
警告是造成这些问题的原因还是我错过了一些重要的事情?
这是我尝试将formik
与react-draft-wysiwyg
formik
绑定的formik
import React from "react";
import styled from "styled-components";
import { Editor } from "react-draft-wysiwyg";
import htmlToDraft from "html-to-draftjs";
import draftToHtml from "draftjs-to-html";
import { EditorState, convertToRaw, ContentState } from "draft-js";
import "react-draft-wysiwyg/dist/react-draft-wysiwyg.css";
const EditorField = ({
input,
meta,
field,
form,
label,
placeholder,
labelCss
}) => {
const [active, setActive] = React.useState();
const [editorState, setEditorState] = React.useState(
EditorState.createEmpty()
);
React.useEffect(() => {
if (form.dirty) {
return;
}
if (!field.value) {
return;
}
const contentBlock = htmlToDraft(field.value);
if (contentBlock) {
const contentState = ContentState.createFromBlockArray(
contentBlock.contentBlocks
);
const editorState = EditorState.createWithContent(contentState);
setEditorState(editorState);
}
}, [field.value, form.dirty]);
const onEditorStateChange = editorState => {
changeValue(editorState);
};
const changeValue = editorState => {
setEditorState(editorState);
form.setFieldValue(
field.name,
draftToHtml(convertToRaw(editorState.getCurrentContent()))
);
};
const hasError = form.touched[field.name] && form.errors[field.name];
return (
<>
<Wrapper>
{label && (
<Label isActive={active} css={labelCss}>
{label}
</Label>
)}
<Editor
editorState={editorState}
wrapperClassName="wrapper-class"
editorClassName="editor-class"
toolbarClassName="toolbar-class"
onEditorStateChange={editorState => onEditorStateChange(editorState)}
placeholder={placeholder}
toolbar={{
options: [
"inline",
"blockType",
"fontSize",
"fontFamily",
"list",
"textAlign",
"link",
"embedded",
"remove",
"history"
]
}}
name={field.name}
id={field.name}
onFocus={() => setActive(true)}
onBlur={e => {
setActive(false);
field.onBlur(e);
}}
/>
{!!hasError && <Error>{hasError}</Error>}
</Wrapper>
</>
);
};
export default EditorField;
const Wrapper = styled.div``;
渲染表单时,我正在执行以下操作
<Field
component={EditorField}
name="article"
label="Write an article"
placeholder="content here"
/>
我从服务器获得的数据显示在编辑器上。
在组件 Editor.js 中
import { useField } from "formik";
const [field, meta] = useField(props.name);
const error = meta.touched && meta.error;
我在下面添加了 <Editor ... />
{meta.touched && meta.error && (
<FormHelperText>{error}</FormHelperText>
)}
在我在编辑器中单击时使用编辑器的页面中,该值默认为<p></p>
并且长度为 8,因此dirty 的测试为真
<EditorDraft
name="value"
style={{ maxHeight: "200px" }}
// when click in the editor , the value will be by default <p></p> and length 8
handleChange={(v) => {
if (v.length > 8) {
setFieldValue("value", v);
} else {
setFieldValue("value", "");
}
}}
defaultValue={values.value}
toolbar={{
options: [
"inline",
"blockType",
"fontSize",
"fontFamily",
"list",
"textAlign",
"colorPicker",
"remove",
"history",
],
}}
/>;
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.