>source

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'필드에만이 문제가 있다고 말해야합니다.

  • 답변 # 1

    그래서 문제는 EditorComponent 내부에있는 것 같습니다. constructor() , 어디서 editorState 기본값은 비어 있습니다 (또는 처음에 말해야 함). 그리고 그것은 아마도 우리의 initialValues 에 대한 Editor 들.

      constructor(props) {
         super(props);
         this.state = {
           editorState: EditorState.createEmpty()
        };
    
    

    이 문제를 해결할 해결책을 찾지 못해 마침내 initialValues 의도 한대로편집기의 기본값을 설정하는 대안을 찾았습니다. 해당 솔루션에 대한 링크는 다음과 같습니다. https://github.com/jpuri/react-draft-wysiwyg/issues/357

  • 답변 # 2

    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;
    
    

  • 이전 c# - Modbus를 통해받은 값을 올바르게 변환하는 방법은 무엇입니까?
  • 다음 python - runtimeerror - 주어진 그룹 = 1, 크기 [64, 1, 4, 4]의 가중치, 예상 입력 [256, 3, 32, 32]에 1 개의 채널이 있지만 대신 3 개의 채널이 있습니다