initialValues 不适用于 react-draft-wysiwyg 字段(redux-form)
initialValues doesn't work for react-draft-wysiwyg field (redux-form)
我正在尝试在 redux-form 中使用 react-draft-wysiwyg 编辑器,一切正常,但唯一的问题是 initialValues 似乎不适用于编辑器字段。
这是我的 Form.js :
<form onSubmit={this.props.handleSubmit(this.onSubmit)} autoComplete="off">
<Field name="title" className="form-input" type="text" placeholder="Title" component={this.titleComponent} />
<Field name="description" className="desc" type="text" placeholder="What is your article about ?" component={this.titleComponent} />
<Field name="editor" type="text" component={EditorFieldComponent} />
<button className="form-button" type="submit" value="Submit">{this.props.button}</button>
</form>
这里是 EditorFieldComponent.js:
const EditorFieldComponent = (props) => {
const { meta: {touched, error}, input } = props;
return(
<EditorComponent
onChange={input.onChange}
value={input.value}
touched={touched}
error={error}
input = {{...input}}
/>
);
}
这是 EditorComponent.js:
class EditorComponent extends React.Component {
constructor(props) {
super(props);
this.state = {
editorState: EditorState.createEmpty()
};
this.props.onChange(
draftToHtml(convertToRaw(this.state.editorState.getCurrentContent()))
);
}
onEditorStateChange = (editorState) => {
const { onChange, value } = this.props;
const newValue = draftToHtml(convertToRaw(editorState.getCurrentContent()));
if (value !== newValue) {
onChange(newValue);
}
this.setState({
editorState
});
};
render(){
return(
<React.Fragment>
<Editor
editorState={this.state.editorState}
toolbarClassName="toolbarClassName"
wrapperClassName="wrapperClassName"
editorClassName="editorClassName"
editorStyle={{ height: "500px", border: "solid 0.1px rgba(0, 0, 0, 0.1)", padding: "10px"}}
onEditorStateChange={this.onEditorStateChange}
toolbar={{
options: ['inline', 'blockType', 'fontSize', 'fontFamily', 'list', 'textAlign', 'colorPicker', 'link', 'embedded'/*, 'emoji'*/, 'image', 'remove', 'history'],
inline: { inDropdown: true },
list: { inDropdown: true },
textAlign: { inDropdown: true },
link: { inDropdown: true },
history: { inDropdown: true }
}}
/>
{this.renderError()}
</React.Fragment>
);}
这是我尝试使用 initialValues 的地方:
return(
<div>
<Form
initialValues={{title: "some title", description: "some description", editor: "some text"}}
/>
</div>
);
另外我应该说 initialValues 对 'description' 和 'title' 字段有效,只有 'editor' 字段有这个问题。
所以问题似乎出在 EditorComponent constructor()
内部,其中 editorState
默认设置为空(或者我应该先说)。这可能会覆盖 initialValues
字段的 Editor
。
constructor(props) {
super(props);
this.state = {
editorState: EditorState.createEmpty()
};
我没有找到解决这个问题的方法,最终按预期使用了 initialValues
,但是 我找到了一个替代方法来为编辑器设置一些字符串 [=23] =] 我们认为合适的。
这是该解决方案的 Link:
https://github.com/jpuri/react-draft-wysiwyg/issues/357
我遇到了同样的问题,比如无法从 api 响应中加载初始值。我认为是因为编辑器在我们收到回复之前正在加载。所以我只是添加了一个这样的简单条件,这样当描述可用时(我在获得 api 响应后将其存储在状态中)然后只有编辑器将加载组件。它在我这边工作正常。
导入的编辑器组件:
{description && (
<>
<div className="editor">
<DraftEditor onDataChange={handleDescription} value={description} />
</div>
</>
)}
我的编辑器组件:
import React, { useState } from 'react';
import { Editor } from 'react-draft-wysiwyg';
import { EditorState, ContentState, convertToRaw, convertFromHTML } from 'draft-js';
import draftToHtml from 'draftjs-to-html';
import 'react-draft-wysiwyg/dist/react-draft-wysiwyg.css';
const DraftEditor = (props) => {
const contentDataState =
ContentState.createFromBlockArray(convertFromHTML(`${props.value}`));
const editorDataState = EditorState.createWithContent(contentDataState);
const [editorState, setEditorState] = useState(editorDataState);
const onEditorStateChange = (editorStateData) => {
setEditorState(editorStateData);
let data = draftToHtml(convertToRaw(editorStateData.getCurrentContent()));
props.onDataChange(data);
};
return (
<React.Fragment>
<Editor
editorState={editorState}
onEditorStateChange={onEditorStateChange}
wrapperClassName="wrapperClassName"
editorClassName="editorClassName"
toolbarClassName="toolbar-class"
toolbar={{
options: ['inline', 'list', 'textAlign'],
inline: {
options: ['bold', 'italic', 'underline'],
},
list: {
options: ['unordered', 'ordered', 'indent', 'outdent'],
},
textAlign: {
options: ['left', 'center', 'right'],
},
}}
/>
</React.Fragment>
);
};
export default DraftEditor;
我正在尝试在 redux-form 中使用 react-draft-wysiwyg 编辑器,一切正常,但唯一的问题是 initialValues 似乎不适用于编辑器字段。
这是我的 Form.js :
<form onSubmit={this.props.handleSubmit(this.onSubmit)} autoComplete="off">
<Field name="title" className="form-input" type="text" placeholder="Title" component={this.titleComponent} />
<Field name="description" className="desc" type="text" placeholder="What is your article about ?" component={this.titleComponent} />
<Field name="editor" type="text" component={EditorFieldComponent} />
<button className="form-button" type="submit" value="Submit">{this.props.button}</button>
</form>
这里是 EditorFieldComponent.js:
const EditorFieldComponent = (props) => {
const { meta: {touched, error}, input } = props;
return(
<EditorComponent
onChange={input.onChange}
value={input.value}
touched={touched}
error={error}
input = {{...input}}
/>
);
}
这是 EditorComponent.js:
class EditorComponent extends React.Component {
constructor(props) {
super(props);
this.state = {
editorState: EditorState.createEmpty()
};
this.props.onChange(
draftToHtml(convertToRaw(this.state.editorState.getCurrentContent()))
);
}
onEditorStateChange = (editorState) => {
const { onChange, value } = this.props;
const newValue = draftToHtml(convertToRaw(editorState.getCurrentContent()));
if (value !== newValue) {
onChange(newValue);
}
this.setState({
editorState
});
};
render(){
return(
<React.Fragment>
<Editor
editorState={this.state.editorState}
toolbarClassName="toolbarClassName"
wrapperClassName="wrapperClassName"
editorClassName="editorClassName"
editorStyle={{ height: "500px", border: "solid 0.1px rgba(0, 0, 0, 0.1)", padding: "10px"}}
onEditorStateChange={this.onEditorStateChange}
toolbar={{
options: ['inline', 'blockType', 'fontSize', 'fontFamily', 'list', 'textAlign', 'colorPicker', 'link', 'embedded'/*, 'emoji'*/, 'image', 'remove', 'history'],
inline: { inDropdown: true },
list: { inDropdown: true },
textAlign: { inDropdown: true },
link: { inDropdown: true },
history: { inDropdown: true }
}}
/>
{this.renderError()}
</React.Fragment>
);}
这是我尝试使用 initialValues 的地方:
return(
<div>
<Form
initialValues={{title: "some title", description: "some description", editor: "some text"}}
/>
</div>
);
另外我应该说 initialValues 对 'description' 和 'title' 字段有效,只有 'editor' 字段有这个问题。
所以问题似乎出在 EditorComponent constructor()
内部,其中 editorState
默认设置为空(或者我应该先说)。这可能会覆盖 initialValues
字段的 Editor
。
constructor(props) {
super(props);
this.state = {
editorState: EditorState.createEmpty()
};
我没有找到解决这个问题的方法,最终按预期使用了 initialValues
,但是 我找到了一个替代方法来为编辑器设置一些字符串 [=23] =] 我们认为合适的。
这是该解决方案的 Link:
https://github.com/jpuri/react-draft-wysiwyg/issues/357
我遇到了同样的问题,比如无法从 api 响应中加载初始值。我认为是因为编辑器在我们收到回复之前正在加载。所以我只是添加了一个这样的简单条件,这样当描述可用时(我在获得 api 响应后将其存储在状态中)然后只有编辑器将加载组件。它在我这边工作正常。
导入的编辑器组件:
{description && (
<>
<div className="editor">
<DraftEditor onDataChange={handleDescription} value={description} />
</div>
</>
)}
我的编辑器组件:
import React, { useState } from 'react';
import { Editor } from 'react-draft-wysiwyg';
import { EditorState, ContentState, convertToRaw, convertFromHTML } from 'draft-js';
import draftToHtml from 'draftjs-to-html';
import 'react-draft-wysiwyg/dist/react-draft-wysiwyg.css';
const DraftEditor = (props) => {
const contentDataState =
ContentState.createFromBlockArray(convertFromHTML(`${props.value}`));
const editorDataState = EditorState.createWithContent(contentDataState);
const [editorState, setEditorState] = useState(editorDataState);
const onEditorStateChange = (editorStateData) => {
setEditorState(editorStateData);
let data = draftToHtml(convertToRaw(editorStateData.getCurrentContent()));
props.onDataChange(data);
};
return (
<React.Fragment>
<Editor
editorState={editorState}
onEditorStateChange={onEditorStateChange}
wrapperClassName="wrapperClassName"
editorClassName="editorClassName"
toolbarClassName="toolbar-class"
toolbar={{
options: ['inline', 'list', 'textAlign'],
inline: {
options: ['bold', 'italic', 'underline'],
},
list: {
options: ['unordered', 'ordered', 'indent', 'outdent'],
},
textAlign: {
options: ['left', 'center', 'right'],
},
}}
/>
</React.Fragment>
);
};
export default DraftEditor;